如何在网页中导入字体

Question

这是我的代码 我添加了字体，但它没有应用

@font-face {
  font-family: 'MyWebFont';
  src: url('KellySlab.ttf') format('truetype');
   }
body, h1, h4, form,footer{font family: 'MyWebFont',sans-serif;}

Answer 1

这是一个很棒的链接，通过非常好的示例CSS-tricks

可以让您更深入地了解这个问题

@font-face 规则应该在任何样式之前添加到样式表中。

    @font-face {
  font-family: 'MyWebFont';
  src:  url('myfont.woff2') format('woff2'),
        url('myfont.woff') format('woff');
}

然后用它来设置这样的元素样式：

body {
  font-family: 'MyWebFont', Fallback, sans-serif;
}

Answer 2

问题是您只加载一个 .ttf 文件，建议使用更多格式以使其在大多数浏览器上工作（如 woff、woff2强>)。

考虑到您的情况：

• 我建议您针对该字体系列利用 google 的 CDN。
• 您将避免处理额外的字体扩展。

见下文：

body {
  font-family: 'Kelly Slab', sans-serif;
}

<link href="https://fonts.googleapis.com/css?family=Kelly+Slab" rel="stylesheet">
<span>Testing Kelly Slab font-family</span>

如果你想在本地加载它无论如何：

转至font-squirrel.com，搜索 Kelly Slab 并点击此处下载 .otf 文件：

下载后，将您的 .otf 文件上传到 generator 并下载生成的网络字体工具包，其中包括 woff 和 woff2 .

要加载它们：

@font-face {
  font-family: 'MyWebFont';
  src:  url('kellyslab-regular-webfont.woff2') format('woff2'),
        url('kellyslab-regular-webfont.woff') format('woff');
}

使用它：

selector {
  font-family: 'MyWebFont', sans-serif;
}