Question

如何从css文件中引用字体？例如，我的css文件具有以下结构：

fonts.css file
    @font-face {
      font-family: 'Open Sans';
      font-style: normal;
      font-weight: 400;
      src: local('Open Sans'), local('OpenSans'), url(http://fonts.gstatic.com/s/opensans/v13/u-WUoqrET9fUeobQW7jkRaCWcynf_cDxXwCLxiixG1c.ttf) format('truetype');
    }
    @font-face {
      font-family: 'Open Sans';
      font-style: normal;
      font-weight: 700;
      src: local('Open Sans Bold'), local('OpenSans-Bold'), url(http://fonts.gstatic.com/s/opensans/v13/k3k702ZOKiLJc3WVjuplzNqQynqKV_9Plp7mupa0S4g.ttf) format('truetype');
    }

如何在其他css文件中使用此字体？

Answer 1

以下是一个例子：

＆＃13;

@font-face {
      font-family: 'Open Sans';
      font-style: normal;
      font-weight: 400;
      src: local('Open Sans'), local('OpenSans'), url(http://fonts.gstatic.com/s/opensans/v13/u-WUoqrET9fUeobQW7jkRaCWcynf_cDxXwCLxiixG1c.ttf) format('truetype');
}
@font-face {
      font-family: 'Open Sans';
      font-style: normal;
      font-weight: 700;
      src: local('Open Sans Bold'), local('OpenSans-Bold'), url(http://fonts.gstatic.com/s/opensans/v13/k3k702ZOKiLJc3WVjuplzNqQynqKV_9Plp7mupa0S4g.ttf) format('truetype');
}
.mystyle {
  font-family: "Open Sans";
  font-weight: 700;
  font-size: 24px;
}

＆＃13;

<p class="mystyle">The quick brown fox jumps over the lazy dog</p>

＆＃13;

如果你想在另一个CSS文件中使用它，在html页面上首先加载包含font faces声明的css，然后使用第一个css加载第二个css：

<link rel="stylesheet" href="my_font.css">
<link rel="stylesheet" href="my_other_stylesheet_using_it.css">

这样，在第二个css中你可以使用第一个css中声明的字体。

您还可以将包含font faces声明的css导入另一个：

@import url("base.css");

看看这个：include one CSS file in another

使用存储在外部css中的字体

1 个答案: