Question

不确定我做错了什么，但是按照本教程http://sixrevisions.com/css/font-face-guide/，我在使用它时遇到了问题。

我在style.css顶部的代码：

@font-face {
    font-family: 'chunkfiveregular';
    src: url('http://careerteam.de/wp-content/themes/theme1383/css/chunkfive-webfont.eot');
    src: url('http://careerteam.de/wp-content/themes/theme1383/css/chunkfive-webfont.eot?#iefix') format('embedded-opentype'),
         url('http://careerteam.de/wp-content/themes/theme1383/css/chunkfive-webfont.woff') format('woff'),
         url('http://careerteam.de/wp-content/themes/theme1383/css/chunkfive-webfont.ttf') format('truetype'),
         url('http://careerteam.de/wp-content/themes/theme1383/css/chunkfive-webfont.svg#chunkfiveregular') format('svg');
    font-weight: normal;
    font-style: normal;
}

我的根文件夹中有所有文件。

我稍后通过以下方式调用font-family：

#man_translated {
    font-size: 26px;
    font-style: italic;
    line-height: 28px;
    font-family:chunkfiveregular;
}

我在wordpress中，我正在使用的模板具有h1，h2，h3的预设字体画布样式，将每个单词转换为手写的字体dakota。也许模板中的这个核心设置与我的onthefly javascript id / css更改相冲突。

Answer 1

你的CSS工作正常但是WordPress可能会覆盖它。尝试将!important放在字体名称旁边。

示例：

#man_translated {
    font-size: 26px;
    font-style: italic;
    line-height: 28px;
    font-family: chunkfiveregular !important;
}

或者您也可以使用相对链接。而不是放http://careerteam.de/wp-content/themes/theme1383/css/chunkfive-webfont.eot，摆脱http://careerteam.de/并使其像这样：

url('wp-content/themes/theme1383/css/chunkfive-webfont.eot');

Fiddle

Answer 2

清单：

您的FontFace声明位于样式表的非常顶部。
所有字体文件都上传到服务器并且位置正确吗？您现有的代码假定字体将上传到与样式表相同的目录中。
您正在为要使用ChunkFive字体的每个元素添加font-family: 'ChunkFiveRegular;。

Answer 3

您需要在此处正确使用单引号（'）：

font-family: 'ChunkFiveRegular';

并且在这里（也没有调用 .p 类，而是 p 元素：

p {font-family:'ChunkFiveRegular';}

Answer 4

在您的实际网站上，仅加载以下样式表：
http://www.careerteam.de/wp-content/themes/theme1383/css/normalize.css
http://www.careerteam.de/wp-content/themes/theme1383/style.css
http://www.careerteam.de/wp-content/themes/theme1383/css/prettyPhoto.css
http://www.careerteam.de/wp-content/themes/theme1383/css/grid.css
http://www.careerteam.de/wp-content/plugins/contact-form-7/styles.css?ver=3.1.1

我在style.css顶部的代码

不包含@font-face {...}！

所以你可能正在使用“错误的”CSS文件......？或缓存版本未更新？

Answer 5

您可以通过删除除truetype之外的所有@ font-face声明来开始简化您的问题，因为所有主流浏览器都支持当前版本的此模式：
http://caniuse.com/ttf

然后你应该检查服务器导出的mime类型是否正确

然后您应该尝试确保始终以相同的方式编写字体名称（带或不带引号）

Answer 6

路径绝对是错误的。它需要来自此引用样式表所在文件夹的路径。首先，在css文件夹中创建一个 fonts 文件夹，将字体文件放在那里并执行此操作;

@font-face {
font-family: 'chunkfiveregular';
src: url('fonts/chunkfive-webfont.eot');
src: url('fonts/chunkfive-webfont.eot?#iefix') format('embedded-opentype'),
     url('fonts/chunkfive-webfont.woff') format('woff'),
     url('fonts/chunkfive-webfont.ttf') format('truetype'),
     url('fonts/chunkfive-webfont.svg#chunkfiveregular') format('svg');
font-weight: normal;
font-style: normal;

Answer 7

您需要选择是否要使用@ font-face或cufon。 @ font-face代码片段应该在你的style.css中，你的字体应该在你自己的文件夹中。

示例：

Your theme's folder
- /css
-  /font 
- theme files

您不需要在样式表的@ font-face中拥有字体的完整网址。


    @font-face {
    font-family: 'chunkfiveregular';
    src: url('font/chunkfive-webfont.eot');
    src: url('font/chunkfive-webfont.eot?#iefix') format('embedded-opentype'),
             url('font/chunkfive-webfont.woff') format('woff'),
             url('font/chunkfive-webfont.ttf') format('truetype'),
             url('font/chunkfive-webfont.svg#chunkfiveregular') format('svg');
    font-weight: normal;
    font-style: normal;
}

您必须将字体名称放在设计中您想要的元素中。这需要查看您的样式表。在某些情况下，如果您尝试更改字体的确切元素不存在，请检查您的页面源并写入元素。有些主题可能看起来像是在一起，但是很多人忘记了WordPress在放入页面ID，帖子ID，小部件和HTML5时所做的生成标记，你正在处理更多标签，如文章，部分，甚至一边

@ font-face不知何故不起作用

7 个答案: