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

【问题标题】：@font-face somehow not working@font-face 不知何故不起作用
【发布时间】：2013-09-16 23:55:25
【问题描述】：

不知道我做错了什么，但是按照本教程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;
}

我已经在我的根文件夹中找到了所有文件。

我稍后通过以下方式调用字体系列：

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

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

【问题讨论】：

只是在没有看到任何 HTML 的情况下确定：您真的有一些 HTML 元素的 class 属性值为 p 还是您的意思是选择 <p> 元素？
数据不足。无法重现此数据的问题 - 未指定字体来源，未识别经过测试的浏览器。并且代码包含一个简单的语法错误，可以使用 CSS Validator 轻松检测到。评论说“全部检查”，但问题中仍然存在语法错误。
好的，我应该更好地编辑我的问题，但我可以向您保证，代码语法现在是正确的，但它仍然无法正常工作
我猜你的模板使用 cufon
我们在哪里可以找到一个活生生的例子？仅使用这些 sn-ps 我们无法找到错误。

标签： css wordpress fonts font-face

【解决方案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

【讨论】：

【解决方案2】：

清单：

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

【讨论】：

全部勾选。现在我使用绝对网址只是为了确保。他们都很好。您可以在外部选项卡中打开它们。

【解决方案3】：

这里需要正确使用单引号（'）：

font-family: 'ChunkFiveRegular';

在这里（也不是调用 .p 类，而是调用 p 元素：

p {font-family:'ChunkFiveRegular';}

【讨论】：

是的，忘记了最后一个单引号，但仍然无法正常工作。 .p 只是一个例子，但确实，我应该写没有类点的 p。
你在p值上加了单引号吗？ ( p {font-family:'ChunkFiveRegular';}，你的例子中没有添加女巫。
仍然无法正常工作。 wordpress 只是讨厌我.. 当我像使用其他字体一样悬停属性时，萤火虫甚至无法正确显示字体（这 5 个例句）
好的。如果这是在 wordpress 上，那么您的 css 可能会因为另一个 css 而被拒绝。您是否检查过元素要渲染的样式？这是直播吗？能发个链接吗？
careerteam.de/en 让我解释一下：h1,h2,h3.. 通常被转换成画布有点像图像而不是文本。现在，我在页面加载后通过 javascript 翻译一些东西。由于在初始页面加载后无法再生成这些画布，我需要手动添加字体样式。

【解决方案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 文件...？
还是缓存版本没有更新？

【讨论】：

【解决方案5】：

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

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

那么你应该尽量确保你总是以相同的方式书写字体名称（带或不带引号）

【讨论】：

【解决方案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;

【讨论】：

【解决方案7】：

您需要选择是使用@font-face 还是cufon。 @font-face 代码 sn-p 应该在你的 style.css 中，你的字体在它们自己的文件夹中。

例子：

您的主题文件夹 - /css - /字体 - 主题文件

您不需要在样式表的@font-face 中包含字体的完整 URL。

@字体脸{ 字体系列：'chunkfiveregular'； src: url('font/chunkfive-webfont.eot'); src: url('font/chunkfive-webfont.eot?#iefix') 格式('embedded-opentype'), url('font/chunkfive-webfont.woff') 格式('woff'), url('font/chunkfive-webfont.ttf') 格式('truetype'), url('font/chunkfive-webfont.svg#chunkfiveregular') 格式('svg'); 字体粗细：正常；字体样式：正常； }

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

【讨论】：