用css添加字体样式答案

【问题标题】：Add font style with css用css添加字体样式
【发布时间】：2017-06-22 11:37:29
【问题描述】：

我的页面中添加了这些字体样式

    <link href='https://fonts.googleapis.com/css?family=Roboto:400,700,700italic,400italic&subset=latin,cyrillic' rel='stylesheet' type='text/css' />
    <link href='https://fonts.googleapis.com/css?family=Open+Sans:400,400italic,700,700italic&subset=latin,cyrillic' rel='stylesheet' type='text/css' />
    <link href='https://fonts.googleapis.com/css?family=Philosopher:400,400italic,700,700italic&subset=latin,cyrillic' rel='stylesheet' type='text/css' />

如何使用 css 将它们添加到我的页面中，以便我的 css 中没有这些外部链接

我试过了

@font-face {
  font-family: 'Roboto';
  src: url('https://fonts.googleapis.com/css?family=Roboto:400,700,700italic,400italic&subset=latin,cyrillic');
}

但在我的控制台（我使用 Mlozilla）我得到了

可下载字体：被消毒剂拒绝

在 Chrome 中，错误显示：

解码下载字体失败：https://fonts.googleapis.com/css?family=Roboto:400,700,700italic,400italic&subset=latin,cyrillic

然后我下载了与Roboto字体相关的文件并尝试了

@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  src: url('../../content/fonts/roboto/ek4gzZ-GeXAPcSbHtCeQI_esZW2xOQ-xsNqO47m55DA.woff2') format('woff2');
  unicode-range: U+0460-052F, U+20B4, U+2DE0-2DFF, U+A640-A69F;
}

但什么也没发生。

【问题讨论】：

stackoverflow.com/questions/35203696/…

标签： html css fonts

【解决方案1】：

您可以转到每个 google 字体链接并将其保存到具有任何名称的 css 文件中，例如：

转到此链接，然后复制并保存到名为roboto 的文本文件中，并将.txt 更改为.css (roboto.css)

https://fonts.googleapis.com/css?family=Roboto:400,700,700italic,400italic&subset=latin,cyrillic

然后将此 css 文件添加到您的 html 中，例如：

<link href='roboto.css' rel='stylesheet' type='text/css'>

并对每个 google 字体链接执行类似操作。

对于本地链接 woff2 文件例如访问此链接，字体将被下载，将其保存在名为 opensans-light.woff2 的字体文件夹中

https://fonts.gstatic.com/s/opensans/v13/DXI1ORHCpsQm3Vp6mXoaTRampu5_7CjHW5spxoeN3Vs.woff2

然后像使用它一样

@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 300;
  src: local('Open Sans Light'), local('OpenSans-Light'), url(fonts/opensans-light.woff2) format('woff2');
}

【讨论】：

IIRC，Google 使用用户代理嗅探来根据浏览器提供不同的 CSS 文件。
@J F ，你是什么意思，我没有得到这个...。这对我包含字体的方式有何影响？

【解决方案2】：

您可以对 CSS 使用 @import 规则

@import url('https://fonts.googleapis.com/css?family=Roboto:400,700,700italic,400italic&subset=latin,cyrillic');

像这样在你的 CSS 文件头中导入，一切都会工作

【讨论】：

【解决方案3】：

很简单

在<link> 标签内打开href 方法中的链接

例如 https://fonts.googleapis.com/css?family=Roboto:400,700,700italic,400italic&subset=latin,cyrillic
复制你喜欢的css样式
将其粘贴到您的 .css 文件中

【讨论】：