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

Question

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

Nic*_*olò 7 css google-chrome google-font-api

这是一个如何使用Google API的Open Sans的简单示例.预期的行为是显示第一行light(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>

Run Code Online (Sandbox Code Playgroud)

更新:

正如这个问题所暗示的那样,问题是由于与本地安装的字体发生冲突.事实上,请观察local来自Google API的' '字体调用:

@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;
}

Run Code Online (Sandbox Code Playgroud)

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

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

因此,问题仍然存在:

如何在Chrome上(适用于任何用户)使用此功能？为什么其他浏览器会忽略本地字体？

Answer 1

小智 8

解决这个问题的简单解决方法是从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');
}

Run Code Online (Sandbox Code Playgroud)

我在本地安装了字体,这种方法似乎适用于Chrome(以及Firefox,IE和Edge).

归档时间：	9 年，9 月前
查看次数：	12246 次
最近记录：	6 年，6 月前