css - Google Fonts - 可变字体在 Windows 浏览器中不起作用

标签 css browser fonts cross-browser

我有一个简单的 Next.js 应用程序，正在 macOS (chrome) 上开发，并且在 Windows(chrome 和其他操作系统)上测试时才发现出现了问题。

我使用字体Inter来自 Google Fonts，nextjs + tailwind 负责在 <head> 中注入(inject)所需的 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 来反射(reflect)这一点？我已经在这个上花了大约一整天的时间，而其他帖子似乎对我不起作用。我做错了什么吗？

最佳答案

更新:Google 字体 API 可能返回静态字体文件

由于用户代理检测，您可能会在某些浏览器中获得静态规则 - 即使它们完美地支持可变字体(例如基于 chromium/blink 的 Opera 浏览器)。 Firefox 或 Chrome 应该可以完美运行。

使用'..'范围分隔符并在firefox中打开css URL

https://fonts.googleapis.com/css2?family=Inter:<a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="dbacbcb3af9beaebebf5f5e2ebeb" rel="noreferrer noopener nofollow">[email protected]</a>

所需变量@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。

示例1:检索@font-face通过API css URL

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:<a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="5126363925116061617f7f686161" rel="noreferrer noopener nofollow">[email protected]</a>&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:<a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="c5b2a2adb185f4f5f5ebebfcf5f5" rel="noreferrer noopener nofollow">[email protected]</a>

将返回与以下内容相同的结果:

https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900

包含每个字体粗细的规则。

示例 2:Opera 的解决方法 @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],
        },
    },
},

谷歌字体用户界面

目前没有直观的方法来检索正确的参数，因为 UI 更关注静态文件输出。

在 UI 中选择多种样式将创建一个静态 css URL，例如:

<link href="https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap" rel="stylesheet">

无缝权重插值不适用于这些文件。

要检索所有支持的设计轴(例如 Inter 支持重量和倾斜)，您可以使用“类型测试器”选项卡。

google font url

仍然不完美。因此，您最好手动连接 URL 查询参数:

https://fonts.googleapis.com/css2?family= +
Inter +
: + slnt + , + wght (设计轴名称)+
@ + -10..0 + , + 100..900 (设计轴范围值)

示例3:内部倾斜+权重

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 设置文本样式属性(property)。
要更改粗体，我们将使用:

.black{
    font-variation-settings: wght 900
}

另请参阅 css-tricks.com: Getting the Most Out of Variable Fonts on Google Fonts

关于css - Google Fonts - 可变字体在 Windows 浏览器中不起作用，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/70201880/

上一篇：flutter - 通过另一个 Widget 更改一个 Widget 的状态

下一篇：javascript - 状态和函数可以同名吗？

相关文章：

CSS3 导航链接背景

html - 浏览器自动为 &lt;input&gt; 元素添加间距，如何删除它们？

javascript - 让 Node.js 语音识别实现在浏览器中工作

javascript - 异步设置为 false 的 jquery ajax 可防止 Chrome 中先前的显示更改

ios - 更改字体后导航栏标题不会保持为粗体

html - 带框阴影的 CSS 语音气泡

javascript - 如何将浏览器从加载状态更改为已加载状态？

css - Webfonts 在 OS X 和 Windows 之间不匹配

emacs - 如何向 Emacs 字体添加 1 像素的垂直间距？

html - 如何添加自定义字体？

©2024 IT工具网  联系我们