Question

我想在网页上使用自定义字体。特别是GT-Walsheim-Pro-Medium-Oblique.woff来自： in documentation

我正在使用的style.css是这样的：
https://andrewsonline.co.uk/content/fonts/

如何使用@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

如果您拥有使用webfont的权限，请使用原始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;
}

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

2 个答案: