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

【问题标题】：Having trouble applying an external font to CSS将外部字体应用于 CSS 时遇到问题
【发布时间】：2018-08-01 15:05:14
【问题描述】：

我下载了免费字体并将 .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”。

另外，我正在使用括号文本编辑器，它是“实时预览”功能。

【问题讨论】：

我刚刚从以下来源读到“truetype”格式适用于 Safari/Android/iOS：css-tricks.com/snippets/css/using-font-face。但是，当我从移动设备访问我的网站时，字体仍然不显示。
在每个 simplifica 周围加上引号似乎也不起作用。
将字体文件移动到与样式表相同的文件夹中并将 src 更改为“src:url('simplifica.ttf')”似乎已经成功了。为了将此字体文件保存在单独的文件夹中，我是否输入了错误的内容？

标签： css fonts font-face font-family text-styling

【解决方案1】：

如果您没有其他格式，请尝试将此字体转换为https://www.fontsquirrel.com/tools/webfont-generator

【讨论】：

【解决方案2】：

尝试导入其他字体格式，如 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/”

【讨论】：

不幸的是，提供的唯一文件是 .ttf 文件。
很高兴我能帮上忙 :)
也感谢您提供字体转换器链接，我不知道这些存在哈哈