css - 如何让 Open Sans Light 在 Chrome 中运行？-6ren

css - 如何让 Open Sans Light 在 Chrome 中运行？

转载作者：技术小花猫更新时间：2023-10-29 11:19:32

这是一个简单示例，说明如何从 Google API 使用 Open Sans。预期的行为是显示第一行比第二行更浅(font-weight 300)。

就 Windows 而言，这适用于当前版本的 FF 和 Edge，但不适用于 Google Chrome。这样的浏览器会以相同的常规样式显示两个段落，而不是对第一段使用浅色样式。

<head>
    <meta charset="utf-8" />
    <link href='https://fonts.googleapis.com/css?family=Open+Sans:300,400' rel='stylesheet' type='text/css'>
    <style>

    </style>
</head>


<body>
    <p style="font-family: 'Open Sans'; font-weight: 300;">Foobar</p>
    <br>
    <p style="font-family: 'Open Sans'; font-weight: 400;">Foobar</p>
</body>

更新:

作为this question建议，问题是由于与本地安装的字体冲突。事实上，请观察 Google API 对“local”字体的调用:

@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 300;
  src: local('Open Sans Light'), local('OpenSans-Light'), url(https://fonts.gstatic.com/s/opensans/v13/DXI1ORHCpsQm3Vp6mXoaTegdm0LZdjqr5-oayXSOefg.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD, U+F000;
}

简单地删除本地字体并不是真正的解决方案，因为:

如果它在那里，可能是因为某些程序需要它
要求网站用户删除他们的本地字体不是一种选择。

因此，问题仍然存在:

如何让它在 Chrome 上运行(对任何用户)？为什么其他浏览器会忽略本地字体来处理它？</strong>

最佳答案

为我解决此问题的一个简单解决方法是从 Google 嵌入代码复制 CSS 源代码，将其放入您自己的 CSS 中，然后简单地删除本地(...)源代码。

像这样:

@font-face { font-family: 'Open Sans Light'; font-style: normal; font-weight: 300; src:url(https://fonts.gstatic.com/s/opensans/v13/DXI1ORHCpsQm3Vp6mXoaTRa1RVmPjeKy21_GQJaLlJI.woff) format('woff'); }

我在本地安装了字体，这种方法似乎在 Chrome(以及 Firefox、IE 和 Edge)中有效。

关于css - 如何让 Open Sans Light 在 Chrome 中运行？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/35340546/

文章推荐： linux - 交换分区中的读取错误如何影响正在运行的进程？

文章推荐： css - p::first-letter 和 p::first-letter 有什么区别？

技术小花猫

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

css - 如何让 Open Sans Light 在 Chrome 中运行？