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文本编辑器，它是“实时预览”功能。

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时遇到问题

2 个答案: