我有一个简单的 Next.js 应用程序,我正在 macOS(chrome)上开发,并且在 Windows(chrome 和其他)上测试时才发现出现了问题。
我使用 Google Fonts 中的字体 Inter,nextjs + tailwind 负责在
<head>
中注入所需的 css:
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossOrigin="" />
<link href="https://fonts.googleapis.com/css2?family=Inter&display=swap" rel="stylesheet" />
构建后翻译为:
<style data-href="https://fonts.googleapis.com/css2?family=Inter&display=swap">
@font-face{font-family:'Inter';font-style:normal;font-weight:400;font-display:swap;src:url(https://fonts.gstatic.com/s/inter/v7/UcCO3FwrK3iLTeHuS_fvQtMwCp50KnMw2boKoduKmMEVuLyfMZs.woff) format('woff')}@font-face{font-family:'Inter';font-style:normal;font-weight:400;font-display:swap;src:url(https://fonts.gstatic.com/s/inter/v7/UcCO3FwrK3iLTeHuS_fvQtMwCp50KnMw2boKoduKmMEVuLyfAZJhjp-Ek-_EeAmM.woff) format('woff');unicode-range:U+0460-052F,U+1C80-1C88,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F}@font-face{font-family:'Inter';font-style:normal;font-weight:400;font-display:swap;src:url(https://fonts.gstatic.com/s/inter/v7/UcCO3FwrK3iLTeHuS_fvQtMwCp50KnMw2boKoduKmMEVuLyfAZthjp-Ek-_EeAmM.woff) format('woff');unicode-range:U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}@font-face{font-family:'Inter';font-style:normal;font-weight:400;font-display:swap;src:url(https://fonts.gstatic.com/s/inter/v7/UcCO3FwrK3iLTeHuS_fvQtMwCp50KnMw2boKoduKmMEVuLyfAZNhjp-Ek-_EeAmM.woff) format('woff');unicode-range:U+1F00-1FFF}@font-face{font-family:'Inter';font-style:normal;font-weight:400;font-display:swap;src:url(https://fonts.gstatic.com/s/inter/v7/UcCO3FwrK3iLTeHuS_fvQtMwCp50KnMw2boKoduKmMEVuLyfAZxhjp-Ek-_EeAmM.woff) format('woff');unicode-range:U+0370-03FF}@font-face{font-family:'Inter';font-style:normal;font-weight:400;font-display:swap;src:url(https://fonts.gstatic.com/s/inter/v7/UcCO3FwrK3iLTeHuS_fvQtMwCp50KnMw2boKoduKmMEVuLyfAZBhjp-Ek-_EeAmM.woff) format('woff');unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+1EA0-1EF9,U+20AB}@font-face{font-family:'Inter';font-style:normal;font-weight:400;font-display:swap;src:url(https://fonts.gstatic.com/s/inter/v7/UcCO3FwrK3iLTeHuS_fvQtMwCp50KnMw2boKoduKmMEVuLyfAZFhjp-Ek-_EeAmM.woff) format('woff');unicode-range:U+0100-024F,U+0259,U+1E00-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF}@font-face{font-family:'Inter';font-style:normal;font-weight:400;font-display:swap;src:url(https://fonts.gstatic.com/s/inter/v7/UcCO3FwrK3iLTeHuS_fvQtMwCp50KnMw2boKoduKmMEVuLyfAZ9hjp-Ek-_EeA.woff) format('woff');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
</style>
和顺风配置:
theme: {
extend: {
fontFamily: {
sans: ['Inter var', ...defaultTheme.fontFamily.sans],
},
},
},
构建后,在浏览器中将以下声明设置为
<html>
标签:
font-family:
Inter var,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,Noto Sans,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji
“Inter var”在 macOS 浏览器上完美运行,在 Windows 上不起作用 - 它会退回到下一个选项。当我将其更改为“Inter”时,它也适用于 Windows,但显然,可变字体的东西消失了,一切都太薄了。为什么可变字体在 Windows 上不起作用,而不是更改所有 CSS 来反映这一点?我已经在这个上花了大约一整天的时间,而其他帖子似乎对我不起作用。我是不是做错了什么?
由于用户代理检测,您可能会在某些浏览器中获得静态规则 - 即使它们完美地支持可变字体(例如基于 chromium/blink 的Opera浏览器)。 Firefox 或 Chrome 应该可以完美运行。
使用 '..' 范围分隔符并在 firefox 中打开 css URL
https://fonts.googleapis.com/css2?family=Inter:[email protected]
所需的变量
@font-face
规则应如下所示:
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 100 900;
src: url(https://fonts.gstatic.com/s/inter/v12/UcC73FwrK3iLTeHuS_fvQtMwCp50KnMa1ZL7.woff2) format('woff2');
}
注意
font-weight: 100 900
属性使用两个值来指定重量范围 - 宾果!我们得到了正确的可变字体 css。
@font-face
let fontWeight = document.querySelector('#fontWeight');
let fontVariation = document.querySelector('#fontVariation');
let fontSamples = document.querySelectorAll('.fontSample');
fontWeight.addEventListener('change', function(e){
let value = e.target.value;
fontSamples.forEach(function(item, i){
fontSamples[i].setAttribute('style', 'font-weight:'+value);
} )
} );
fontVariation.addEventListener('change', function(e){
let value = e.target.value;
fontSamples.forEach(function(item, i){
fontSamples[i].setAttribute('style', 'font-variation-settings: \'wght\' '+value);
} )
} )
body{
font-family: georgia
}
@font-face {
src: url('https://mdn.github.io/css-examples/variable-fonts/fonts/AmstelvarAlpha-VF.woff2') format('woff2-variations');
font-family:'Amstelvar';
font-style: normal;
}
.amstelvar{
font-family: 'Amstelvar', serif;
}
.inter{
font-family: 'Inter', 'Open Sans', sans-serif;
}
h1{
font-weight: 500;
transition: 0.3s;
}
<link href="https://fonts.googleapis.com/css2?family=Inter:[email protected]&display=swap" rel="stylesheet">
<h1 class="fontSample inter">Hamburglefonstiv (Inter)</h1>
<h1 class="fontSample amstelvar">Hamburglefonstiv (Amstelvar)</h1>
<p>
<label>Font weight</label>
<input id="fontWeight" type="range" min="100" max="900" step="1">
</p>
<p>
<label>font-variation-settings</label>
<input id="fontVariation" type="range" min="100" max="900" step="1">
</p>
如前所述,这在 Opera(也许还有其他浏览器)中不起作用。所以上面的css URL
https://fonts.googleapis.com/css2?family=Inter:[email protected]
将返回与以下相同的结果:
https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900
包含每个字体粗细的规则。
@font-face
我们可以将正确的变量
font-face
规则复制到我们的CSS中。
let fontWeight = document.querySelector('#fontWeight');
let fontVariation = document.querySelector('#fontVariation');
let fontSamples = document.querySelectorAll('.fontSample');
fontWeight.addEventListener('change', function(e) {
let value = e.target.value;
fontSamples.forEach(function(item, i) {
fontSamples[i].setAttribute('style', 'font-weight:' + value);
})
});
fontVariation.addEventListener('change', function(e) {
let value = e.target.value;
fontSamples.forEach(function(item, i) {
fontSamples[i].setAttribute('style', 'font-variation-settings: \'wght\' ' + value);
})
})
body {
font-family: georgia
}
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 100 900;
src: url(https://fonts.gstatic.com/s/inter/v12/UcC73FwrK3iLTeHuS_fvQtMwCp50KnMa1ZL7.woff2) format('woff2');
}
@font-face {
src: url('https://mdn.github.io/css-examples/variable-fonts/fonts/AmstelvarAlpha-VF.woff2') format('woff2-variations');
font-family: 'Amstelvar';
font-style: normal;
}
.amstelvar {
font-family: 'Amstelvar', serif;
}
.inter {
font-family: 'Inter', 'Open Sans', sans-serif;
}
h1 {
font-weight: 500;
transition: 0.3s;
}
<h1 class="fontSample inter">Hamburglefonstiv (Inter)</h1>
<h1 class="fontSample amstelvar">Hamburglefonstiv (Amstelvar)</h1>
<p>
<label>Font weight</label>
<input id="fontWeight" type="range" min="100" max="900" step="1">
</p>
<p>
<label>font-variation-settings</label>
<input id="fontVariation" type="range" min="100" max="900" step="1">
</p>
由于字体系列名称在检索到的
@font-face
声明中定义为“Inter”(不带“var”),因此您还应该使用此名称来引用它:
theme: {
extend: {
fontFamily: {
sans: ['Inter', ...defaultTheme.fontFamily.sans],
},
},
},
自 2024 年起更新,UI 允许您生成可变字体查询。但是,如果您打算创建诸如自定义字体选择器之类的东西,那么了解元组的创建可能仍然很有趣。
目前没有直观的方法来检索正确的参数,因为 UI 更关注静态文件输出。
手动连接URL查询参数:
https://fonts.googleapis.com/css2?family=
+Inter
+:
+ slnt
+ ,
+ wght
(设计轴名称)+@
+ -10..0
+ ,
+ 100..900
(设计轴范围值)
let fontWeight = document.querySelector('#fontWeight');
let fontVariation = document.querySelector('#fontVariation');
let fontSamples = document.querySelectorAll('.fontSample');
fontWeight.addEventListener('change', function(e) {
let value = e.target.value;
fontSamples.forEach(function(item, i) {
fontSamples[i].setAttribute('style', 'font-weight:' + value);
})
});
fontVariation.addEventListener('change', function(e) {
let value = e.target.value;
fontSamples.forEach(function(item, i) {
fontSamples[i].setAttribute('style', 'font-variation-settings: \'slnt\' ' + value);
})
})
/* latin */
@font-face {
font-family: "Inter";
font-style: oblique 0deg 10deg;
font-weight: 100 900;
src: url(https://fonts.gstatic.com/s/inter/v12/UcCo3FwrK3iLTcviYwY.woff2) format("woff2");
}
body {
font-family: Inter;
}
.inter {
font-family: "Inter", "Open Sans", sans-serif;
}
h1 {
font-weight: 500;
transition: 0.3s;
}
<h1 class="fontSample inter">Hamburglefonstiv (Inter)</h1>
<p>
<label>Font weight</label>
<input id="fontWeight" type="range" min="100" max="900" step="1">
</p>
<p>
<label>font-slant</label>
<input id="fontVariation" type="range" min="-10" max="0" step="1" value="0">
</p>
值得注意: 您还可以通过
font-variation-settings
属性设置文本样式。.black{
font-variation-settings: wght 900
}
您可以下载字体的ttf文件并将该文件包含在css中。
@font-face{
font-family: rocksalt;
src: url('../font/RockSalt-Regular.ttf');
}
这里RockSalt是从google fonts下载的字体,导入到名为font的文件夹中,然后使用关键字“rocksalt”添加它。