@font脸不知何故不起作用

不确定我做错了什么，但是按照本教程 http://sixrevisions.com/css/font-face-guide/我无法让它工作。

我的代码在样式.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的预设字体画布样式，将每个单词转换为手写字体达科他州的png。也许模板中的这个核心设置与我的即时JavaScript id/css更改冲突。

你的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');

小提琴

清单：

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

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

font-family: 'ChunkFiveRegular';

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

p {font-family:'ChunkFiveRegular';}

在您的实际站点上，仅加载以下样式表：

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.csshttp://www.careerteam.de/wp-content/plugins/contact-form-7/styles.css?ver=3.1.1

我的代码在样式的顶部.css

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

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

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

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

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

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

@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;

您需要选择是要使用@font面还是cufon。 @font面代码片段应该在你的风格中.css字体应该在你的文件夹中。

例：

主题文件夹-/.css-/字体- 主题文件

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

   @font面{    字体家族："块五常规";    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'）;    字体粗细：正常;    字体样式：正常;}

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

相关内容

最新更新

热门标签：