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

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

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

25

4

这是一个简单示例，说明如何从 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/

25

4

0

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

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

mvvm-light - 如何将 MVVM Light Toolkit 与现有的非 MVVM Light Toolkit 项目一起使用
我需要为我正在处理的应用程序使用 Surface 项目模板，但我也想使用 MVVM Light Toolkit。我发现我可以“添加 | 新项目...”并为 View 、 View 模型或定位器选择一个
mvvm-light - MVVM Light Messenger执行多次
我正在使用MVVM Light，并且正在使用消息在ViewModel之间进行通信，以使ViewModel知道何时可以执行某些操作。我的问题是我注册了一条消息，然后多次收到它。因此，要使我的程序不止执行
mvvm-light - mvvm light-消息传递
我目前正在自学MVVM模式。我第一次碰到了消息传递的概念。我知道消息传递包含在mvvm-light工具包中。但是我找不到任何地方的用法示例(下载中未提供示例项目)。如果有人可以指导我了解有关如何
mvvm-light - MVVM Light 片段在哪里？
使用Nuget安装MVVM Light Toolkit时，似乎没有安装MVVM Light的片段。我在哪里可以找到它们？最佳答案片段可在 GitHub 上找到. 下载代码(右上角克隆或下载按钮)
mvvm-light - MVVM Light IsInDesignMode 属性不起作用
我遇到了一个问题，即在 VS 或 Blend 中运行解决方案时，属性 IsInDesignMode 没有返回 true 的预期值。我的环境包括 Win Server 2008 R2、VS2010 Pr
mvvm-light - MVVM Light Messenger - 如何对目标消息进行单元测试？
如果我将消息从 ViewModelA 发送到 ViewModelB，是否有办法从我的单元测试中捕获此通知，该单元测试正在测试引发消息的 ViewModelA？ Messenger.Default.Se
java - light-4j:light-codegen 无法生成项目
我尝试使用提供的示例 petstore openapi.json 生成项目。我用过light-codegen生成端点和模型。我确实安装了 light-codegen: git clone https
java - 这段代码告诉计算机做什么 Lights[k] = !lights[k];？
这段代码告诉计算机做什么？附注“灯”是一个 boolean 数组。 for (int k = 1; k < lights.length; k++) lights[k]
javascript - Light mesh with specific light 三个js
我有一个包含几个对象和一些对象的场景，在这些情况下，我希望球体受到粉红色和蓝色灯光的影响。但我也有一个管几何结构，它应该只受白光影响，而不受粉红色和蓝色光的影响。有关问题的演示，请参见下图:现在发生
mvvm-light - 何时在 MVVM Light 中处理 ViewModel
我正在考虑开始使用 MVVM Light，并且遇到了"new"ICleanup 界面。我只是想知道你什么时候清理虚拟机......当你离开页面时？另外，我看到 ViewModelLocator 中有
mvvm-light - MVVM Light Listener 不释放/确定性完成注册对象？
我有一个带有关联虚拟机的子窗口，每次我要求打开子窗口时都会创建该虚拟机。当子窗口打开时，它会为 MVVM Light 消息注册一个监听器。关闭窗口后，我很确定我正在释放对它的所有引用，但我实际上并没有
mvvm-light - PCL 中的 MVVM Light DispatcherHelper
是否有 MVVM Light DispatcherHelper 可用于 PCL 的时间表？官博中只有备注，暂时不可用。最佳答案我刚刚添加了一个 nuget 包，它可以帮助您从 MvvmLight
mvvm-light - 如何让 MVVM Light 与 Metro 中的分组项目页面很好地配合使用？
我正在尝试按照此博客文章中的示例使用 MVVM Light 框架来实现 Metro 风格的分组项目页面，但使用 ViewModelLocator 来提供可混合性: http://mikaelkoski
mvvm-light - 用 MvvmCross 替换 MVVM Light 或同时使用两者
我们有一个使用 MVVM Light 的 WP8 应用程序，它运行良好。但是，现在我们要使用 Xamarin 来定位 iOS。看来 MvvmCross 是更好的跨平台开发框架。有没有人有改变这样的框
mvvm-light - MVVM Light Toolkit 4.5 设置方法
刚刚注意到 4.2.30 版本不包括 protected bool Set( ref T field, T newValue,
mvvm-light - 在 MVVM Light 和 SimpleIOC 中使用设计时存储库
我已经开始使用最新的 MVVM Light 工具包 v4(NuGet 预览版 v4.1.21，DLL v:4.0.21.25725)，它实现了 SimpleIOC 模式。在我的 ViewModelL
mvvm-light - MVVM Light 工具包 Interaction.Triggers 在数据模板中不触发
我可以使用 Interaction.Triggers 捕获文本框上的 textchanged 事件，如下所示:
mvvm-light - 使用 MVVM Light 时仍然需要调度到 UI 线程吗？
我希望这不是一个太愚蠢的问题:我刚刚开始使用 MVVM light(到目前为止很喜欢它!)。在“之前”(即使用 MVVML 之前)，我必须通过 ui 分派(dispatch)任何会命中引发 INoti
java - 使用 Theme.Light.NoTitleBar 显示 Light AlertDialog
我在 list 中使用了以下行: android:theme="@android:style/Theme.Light.NoTitleBar" 没有标题栏并在我的应用程序中显示精简版的 AlertDia
java - LibGdx Box2dLights : How to make Chain Lights emit light in all directions?
“ChainLight”类在其构造函数中有一个名为“rayDirection”的参数: ChainLight(rayHandler, rays, Color, distance, rayDirecti

首页

博学

6Ren·AI

商城

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