使用 @fontface 将自定义字体添加到 style.css

Question

我想在网页上使用一种自定义字体。特别是 GT-Walsheim-Pro-Medium-Oblique.woff 来自：
https://andrewsonline.co.uk/content/fonts/

我正在使用的 style.css 是这样的：
https://github.com/syunghong/veil/blob/master/css/style.css

如何使用 @fontface 将此字体文件合并到我的 style.css 文件中？
我在名为 fonts 的文件夹中有 GT-Walsheim-Pro-Medium-Oblique.woff。

Answer 1

这里

@font-face {
  font-family: 'RobotoBold'; /*this is what you put on your font family*/
  src: url('../fonts/Roboto-Bold.ttf'); /*Link to the font*/
}

使用它

p {
   font-family: RobotoBold;
   font-size: 14;
}

Answer 2

如果您拥有使用网络字体的权利，请使用原始ttf或otf字体并渲染全套here at FontSquirrel。不同的浏览器喜欢不同的字体类型，旧的浏览器是最挑剔的。

然后将字体添加到样式表的顶部，如果您看到 FOUT，“Flash of Unstyled Text”，它会首先加载，甚至在样式表内联之前加载。 More info here 但基本上你希望在你的 html 开始加载之前加载并准备好字体。

然后像这样加载你的字体：

   @font-face {
      font-family: 'GT Walsheim Pro Medium Oblique';
      src: url('GT-Walsheim-Pro-Medium-Oblique.eot');
      src: url('GT-Walsheim-Pro-Medium-Oblique.eot?#iefix&v=4.6.3') format('embedded-opentype'),
      url('GT-Walsheim-Pro-Medium-Oblique.woff2') format('woff2'),
      url('GT-Walsheim-Pro-Medium-Oblique.woff') format('woff'),
      url('GT-Walsheim-Pro-Medium-Oblique.ttf') format('truetype'),
      url('GT-Walsheim-Pro-Medium-Oblique.svg') format('svg');
      font-weight: normal;
      font-style: normal;
    }

当你在那里渲染字体包时，Font Squirrel 会为你输出上面的代码。

像这样调用你的css中的字体，我以你的H标题为例，确保总是有一个备用字体，以防它出错或由于某种原因无法加载：

h1, h2, h3, h4, h5, h6 {
  font-family: 'GT Walsheim Pro Medium Oblique', arial, sans-serif;
}