@font-face 不适合我答案

【问题标题】：@font-face not working for me@font-face 不适合我
【发布时间】：2014-04-12 05:33:28
【问题描述】：

无法让@font-face 功能在我的 css 中工作

使用以下代码：

@font-face {
    font-family: bigCaslon;
    src: url(http://www.mywebsite.com/web/wp-content/font/BigCaslon.ttf);
    font-weight:400;
}

然后在同一个 css 中将字体设置为此：

font-family: 'bigCaslon';

任何帮助将不胜感激。

好的，所以我将代码更改为以下内容：

@font-face {
    font-family: 'MyWebFont';
    src: url('../web/wp-content/font/BigCaslon.eot'); /* IE9 Compat Modes */
    src: url('../web/wp-content/font/BigCaslon.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
         url('../web/wp-content/font/BigCaslon.woff') format('woff'), /* Modern Browsers */
         url('../web/wp-content/font/BigCaslon.ttf')  format('truetype'), /* Safari, Android, iOS */
         url('../web/wp-content/font/BigCaslon.svg#svgFontName') format('svg'); /* Legacy iOS */
    }

font-family: 'MyWebFont';

但仍然没有运气。我还创建了其他字体格式

【问题讨论】：

您是否尝试过font-family: 'bigCaslon';，所以在您的@font-face 中使用'？
在 urlbar 中填写 url 时 url 给你什么？这行得通吗？
嗨，刚刚在那里进行了更改，但仍然没有运气
您的路径可能不正确。加载页面时打开控制台，我敢打赌，当浏览器请求字体时，您会看到一些 404 错误。为了最终解决这个问题，我们需要您的目录结构和/或您网站的链接。
@gussy81 - 不，它没有。通过查看您的 CSS 文件以及您所说的字体所在的位置，您在 CSS 文件中的字体路径应该是 ../../fonts/BigCaslon.eot。但是你也应该把你的字体放在你的主题目录中，而不仅仅是你的 wp-content 目录。

标签： css font-face

【解决方案1】：

您不能只使用一个ttf 并期望它能够工作。大多数浏览器使用woff 字体文件来呈现自定义字体。此外，要获得完整的浏览器支持，您需要使用BulletProof @font-face syntax：

@font-face {
    font-family: 'MyWebFont';
    src: url('webfont.eot'); /* IE9 Compat Modes */
    src: url('webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
         url('webfont.woff') format('woff'), /* Modern Browsers */
         url('webfont.ttf')  format('truetype'), /* Safari, Android, iOS */
         url('webfont.svg#svgFontName') format('svg'); /* Legacy iOS */
    }

您可以使用FontSquirrel's Generator 从ttf 或otf 文件生成eot、woff 和svg 文件

编辑以回复评论

字体文件不必在同一目录下，只要路径正确即可。例如，我的目录结构通常是这样的：

assets/
    css/
       style.css
    fonts/
       family/
           family.ttf
           family.svg
           family.woff
           family.eot

在这种情况下，我的 CSS 中字体的路径将如下所示：

url('../fonts/family/family.eot')

【讨论】：

好的，我会试一试。字体是否应该与css文件位于同一目录中？
我试过了，但没有为我工作。我在上面发布了我的新代码 - 似乎是你建议的

【解决方案2】：

好吧，亚当终于把我带到了那里，这就是我的解决方案

我将字体全部放在我的 ftp 主目录中名为 fonts 的文件夹中，并在我的主 css 文件中使用以下语法：

@font-face {
    font-family: 'MyWebFont';
    src: url('../../font/BigCaslon.eot'); /* IE9 Compat Modes */
    src: url('../../font/BigCaslon.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
         url('../../font/BigCaslon.woff') format('woff'), /* Modern Browsers */
         url('../../font/BigCaslon.ttf')  format('truetype'), /* Safari, Android, iOS */
         url('../../font/BigCaslon.svg#svgFontName') format('svg'); /* Legacy iOS */
    }

然后我引用了字体：

font-family: 'MyWebFont';

感谢大家让我正确地直接和尊重亚当！！

【讨论】：