将外部字体应用到 CSS 时遇到问题

Question

我下载了一个免费字体，并将 .ttf 文件放在我本地服务器上的一个文件夹中。但是，我似乎无法让字体真正起作用。这是我在网上找到的用于应用外部字体的代码：

    @font-face {
    font-family: simplifica;
    src: url(fonts/simplifica.ttf) format('truetype');
}

    .header {
  font-family: simplifica;
  background-color: #f1f1f1;
  padding: 30px;
  text-align: center;
}

澄清一下，我确实更改了文件名，因为我在某处读到大写字母可能会导致 IE 等浏览器出现意外问题。原始文件名为 "SIMPLIFICA Typeface.tff".

此外，我正在使用 Brackets 文本编辑器，它具有 "live preview" 功能。

Answer 1

尝试导入其他字体格式如 woff 和 eot 并尝试此代码

@font-face {
font-family: simplifica;
src: url(fonts/simplifica.eot?#iefix) format('embedded-opentype'),
   url(fonts/simplifica.woff) format('woff'),
   url(fonts/simplifica.ttf) format('truetype');
}

如果字体文件夹与包含 css 文件的 css 文件夹相同，请将 "fonts/" 替换为“../fonts/”

Answer 2

如果您没有其他格式，请尝试使用 https://www.fontsquirrel.com/tools/webfont-generator

转换此字体

将外部字体应用到 CSS 时遇到问题

Having trouble applying an external font to CSS

css

fonts

text-styling

font-face

font-family