使用css添加字体样式

Question

我已将这些字体样式添加到我的页面

    <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，700700Italic，400italic

然后我下载了与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;
}

但什么都没发生。

Answer 1

这很简单

>

在您的

https://fonts.googleapis.com/css?family=Roboto400,700,700斜体字

Answer 2

您可以为CSS使用@import规则

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

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

Answer 3

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

转到此链接，然后复制并保存到名为机器人的文本文件，并将. txt更改为. css（roboto.css）

https://fonts.googleapis.com/css?family=Roboto:400，700700Italic，400italic

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

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

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

例如，要在本地链接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');
}