时间戳

首页 > 解决方案 > 下载的自定义字体不起作用；我究竟做错了什么？

fonts - 下载的自定义字体不起作用；我究竟做错了什么？

问题描述

这是我第一次在我正在构建的网站上使用自定义字体。我选择了这个：

https://fonts2u.com/final-fantasy-36-font-regular.font

我下载了它并阅读了一些简短的教程。他们都说同样的话，将下载字体的文件放在 css/fonts 下，然后将其包含在我的样式表中：

在此处输入图像描述

但是，它不会转换左侧菜单中的文本。我究竟做错了什么？

标签： fontswebfonts

解决方案

我知道我的字体调用看起来比这复杂得多。

/* BEGIN Light */
@font-face {
  font-family: 'Open Sans';
  src: url("OpenSans/Light/OpenSans-Light.eot?v=1.1.0");
  src: url("OpenSans/Light/OpenSans-Light.eot?#iefix&v=1.1.0") format("embedded-opentype"), url("OpenSans/Light/OpenSans-Light.woff2?v=1.1.0") format("woff2"), url("OpenSans/Light/OpenSans-Light.woff?v=1.1.0") format("woff"), url("OpenSans/Light/OpenSans-Light.ttf?v=1.1.0") format("truetype"), url("OpenSans/Light/OpenSans-Light.svg?v=1.1.0#Light") format("svg");
  font-weight: 300;
  font-style: normal; }
/* END Light */
/* BEGIN Light Italic */
@font-face {
  font-family: 'Open Sans';
  src: url("OpenSans/LightItalic/OpenSans-LightItalic.eot?v=1.1.0");
  src: url("OpenSans/LightItalic/OpenSans-LightItalic.eot?#iefix&v=1.1.0") format("embedded-opentype"), url("OpenSans/LightItalic/OpenSans-LightItalic.woff2?v=1.1.0") format("woff2"), url("OpenSans/LightItalic/OpenSans-LightItalic.woff?v=1.1.0") format("woff"), url("OpenSans/LightItalic/OpenSans-LightItalic.ttf?v=1.1.0") format("truetype"), url("OpenSans/LightItalic/OpenSans-LightItalic.svg?v=1.1.0#LightItalic") format("svg");
  font-weight: 300;
  font-style: italic; }
/* END Light Italic */
/* BEGIN Regular */
@font-face {
  font-family: 'Open Sans';
  src: url("OpenSans/Regular/OpenSans-Regular.eot?v=1.1.0");
  src: url("OpenSans/Regular/OpenSans-Regular.eot?#iefix&v=1.1.0") format("embedded-opentype"), url("OpenSans/Regular/OpenSans-Regular.woff2?v=1.1.0") format("woff2"), url("OpenSans/Regular/OpenSans-Regular.woff?v=1.1.0") format("woff"), url("OpenSans/Regular/OpenSans-Regular.ttf?v=1.1.0") format("truetype"), url("OpenSans/Regular/OpenSans-Regular.svg?v=1.1.0#Regular") format("svg");
  font-weight: normal;
  font-style: normal; }
/* END Regular */

使用所有不同文件格式的原因是允许不同的系统/浏览器使用他们“知道”的格式。例如，如果您只加载ttf格式，Apple/Safari 设置可能没有问题，但运行 EI 的 Microsoft 机器可能不知道该做什么。如果我忘记了哪些字体格式对应于我认为 IE 查找的浏览器，请原谅我eot。如果加载品牌字体真的很重要，那么我将它们全部加载。

我还在 . 开头使用了一般重置css，包括指向新字体文件的一般指针：

*{
    /* typographic resets */
    font-family:'Open Sans',Arial,Helvetica,sans-serif;
    font-size:14px;
    line-height:1.6em;
    text-decoration:none;
    vertical-align:baseline;
}

通过仔细的路径指定，这应该可以解决您的问题。（请记住在测试时清除缓存。）

请注意“备份”设置 ( Arial,Helvetica,sans-serif)，它指定了在我们想要的文件失败时应该加载的字体。

我相信上述信息被认为是最佳实践。如果我错了，请纠正我。

推荐阅读