css - 为什么这个 @font-face 样式不适用于我的 HTML?

标签 css font-face blueprint-css

我希望有人能指出这个字体实现有什么问题。我已经使用 body 标签对此进行了测试,因此毫无疑问问题是否出在 HTML 上(是的,我确实有一个 body 标签。)

我已经从 FontSquirrel 获得了字体和实现 CSS。感谢您查看此内容!

CSS:

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

body {
    font-family: DymaxionScriptRegular, courier;
}

文件树结构:

Screenshot of my development folder showing location of CSS, index.html and font files.

Courier 备用字体的屏幕截图:

Courier fallback font

回答:显然,如果在字体系列声明中保留“Regular”,一切正常。通过玩它回答了我自己的问题。

真正的答案:我的第一个“答案”只适用于 Safari。在所有这些中起作用的是将“'DymaxionScript-webfont ...”更改为'../DymaxionScript-webfont ... 在我这样做之后,一切正常。这是糟糕的路径。

最佳答案

这是一个更简洁的@font-face 实现,我知道它可以全面工作:

@font-face {
    font-family: 'DymaxionScriptRegular';
    src: url('/path/to/font/webfont.eot?') format('eot'),
         url('/path/to/font/webfont.woff') format('woff'), 
         url('/path/to/font/webfont.ttf') format('truetype'),
         url('/path/to/font/webfont.svg#webfont') format('svg');
    font-weight:normal;
    font-style:normal;
}

关于css - 为什么这个 @font-face 样式不适用于我的 HTML?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/6019783/

相关文章:

jquery - 隐藏列表项中的文本

css - 列中的 Kendo UI 网格输入样式

css - 字体在 GoogleFonts 上的呈现方式与在我的页面上呈现的方式不同

css - PC 上的@font-face 别名问题

html - 来自字段 : <input>? 中的粗体文本

css - 蓝图 CSS 在网格中居中

html - 将单选按钮和标签保持在同一行

php - 每个父类别的 magento 单独样式表

css - 禁用 div 的蓝图 CSS

css - 为什么蓝图框架在标题和文本大小上定义边距底部?