使用CSS添加字体样式

Question

使用CSS添加字体样式

4

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

    <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');
}

但是在我的控制台中（我使用的是Mozilla），我得到了以下信息：

可下载字体：被过滤器拒绝

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

但是什么都没发生。

- Dimentica

https://dev59.com/4FsW5IYBdhLWcg3wQVRC#35204067 - Igor Ivancha

3个回答

2

您可以使用@import规则来处理CSS。

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

在您的CSS文件头部像这样导入，一切都会正常工作。

- Giorgi Parunov

1

这很简单

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

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

- Manish Poduval

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Ambrish Pathak · Accepted Answer

您可以访问每个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');
}