Google 字体 - 可变字体在 Windows 浏览器中不起作用
Posted
技术标签:
【中文标题】Google 字体 - 可变字体在 Windows 浏览器中不起作用【英文标题】：Google Fonts - variable fonts not working in Windows browsers 【发布时间】：2022-01-09 02:06:36 【问题描述】：我有一个简单的 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-facefont-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-facefont-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-facefont-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-facefont-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-facefont-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-facefont-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-facefont-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-facefont-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 上运行，但显然，可变字体的东西已经消失了，一切都太薄了。与其更改所有 CSS 以反映这一点，为什么可变字体在 Windows 上不起作用？我已经花了大约一整天的时间在这个和其他 SO 帖子上似乎对我不起作用。我做错了吗？
【问题讨论】：
【参考方案1】：即使您的可变字体包含 woffs 中的所有权重 - 您仍然必须通过 wght@100..900 参数将所有权重添加到您的链接元素，如下所示：
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@100..900&display=swap" rel="stylesheet">
编辑：您也可以使用 google 字体 UI 选择所有粗细样式： 您的输出将是这样的：
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap" rel="stylesheet">
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:wght@100..900&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>由于字体系列名称在检索到的@font-face 声明中被定义为“Inter”（没有“var”），因此您也应该使用此名称来引用它：
theme:
extend:
fontFamily:
sans: ['Inter', ...defaultTheme.fontFamily.sans],
,
,
,
值得注意的是：
根据可变字体（文件） - 您可以通过 font-variation-settings 属性设置文本样式。
在示例中，您会看到支持附加设计轴的 "Amstelvar" 字体。
要更改我们将使用的粗体：
.black
font-variation-settings: wght 900
出于某种原因，谷歌显然决定像以前一样通过font-weight 控制权重。因此，更改 font-variation-settings 可能不会对 google 可变字体产生任何影响。这可能会在未来的 API 版本中更改。
另见 css-tricks.com: Getting the Most Out of Variable Fonts on Google Fonts
【讨论】：
添加 ":wght@100..900" 解决了这个问题。谢谢【参考方案2】：你可以下载字体的ttf文件，然后将文件包含在css中。
@font-face
font-family: rocksalt;
src: url('../font/RockSalt-Regular.ttf');
这里的 RockSalt 是从 google fonts 下载的字体并导入到名为 font 的文件夹中，并使用关键字“rocksalt”添加它。
【讨论】：
以上是关于Google 字体 - 可变字体在 Windows 浏览器中不起作用的主要内容，如果未能解决你的问题，请参考以下文章
[图]Windows 10 Build 16273版本更新发布：新增可变式字体Bahnschrift
如何使此 Google 字体在 Internet Explorer 11 上运行