自定义 css 字体未加载

Question

这是我要添加自定义字体的页面http://pgkweb.ru/temp/1/index.html 所以字体是：

http://pgkweb.ru/temp/1/include/MyriadProCondRegular/MyriadProCondRegular.ttf
http://pgkweb.ru/temp/1/include/MyriadProCondRegular/MyriadProCondRegular.woff
http://pgkweb.ru/temp/1/include/MyriadProCondRegular/MyriadProCondRegular.otf
http://pgkweb.ru/temp/1/include/MyriadProCondRegular/MyriadPro-Cond.eot

我从 css (http://pgkweb.ru/temp/1/include/style.css) 给他们打电话:

/*FONTS*/
@font-face {
   font-family: MyriadProCond;
    src: url(include/MyriadProCondRegular/MyriadProCondRegular.ttf); /* Путь к файлу со шрифтом */
    src: url(include/MyriadProCondRegular/MyriadProCondRegular.woff);
    src: url(include/MyriadProCondRegular/MyriadProCondRegular.otf);
    src: url(include/MyriadProCondRegular/MyriadPro-Cond.eot);
}   

*, body, p,h3,h4 {
    font-family: 'MyriadProCond', Arial, sans-serif;
    color: #fff;
}

但是正如我在 FireFox 代码浏览器中看到的那样，它不起作用（直通）。但为什么？

Answer 1

似乎每个 url 周围都缺少引号，语法也有点不对劲：

@font-face {
    font-family: MyriadProCond;
    src: url('include/MyriadProCondRegular/MyriadPro-Cond.eot'); 
    src: url('include/MyriadProCondRegular/MyriadProCondRegular.woff') format('woff'), /* Путь к файлу со шрифтом */
         url('include/MyriadProCondRegular/MyriadProCondRegular.ttf')  format('truetype'),
         url('include/MyriadProCondRegular/MyriadProCondRegular.otf') format('otf'); 
}

看这里：https://css-tricks.com/snippets/css/using-font-face/

如果这不起作用，请检查 URL 是否正确以及是否正在下载字体（网络选项卡中没有 404 错误）。

Answer 2

您的网络字体和样式表都在 "include" 文件夹中，即它们都在同一个文件夹中，因此您必须从链接中的文件路径中删除文件夹名称，例如：

src: url("MyriadProCondRegular/MyriadProCondRegular.ttf");

而不是

src: url("include/MyriadProCondRegular/MyriadProCondRegular.ttf");

与所有其他网址相同

自定义 css 字体未加载

Custom css font isn't loading

css

webfonts