使用@fontface字体加载斜体

约西亚

我有这样的CSS:

@font-face {
    font-family: 'alegreya';
    src:url('fonts/AlegreyaBold.ttf');
    font-weight:normal;
    font-style: normal;
}
@font-face {
    font-family: 'alegreya';
    src:url('fonts/AlegreyaBoldItalic.ttf');
    font-weight:normal;
    font-style: italic, oblique;
}
@font-face {
    font-family: 'alegreya';
    src:url('fonts/AlegreyaBlack.ttf');
    font-weight:bold;
    font-style: normal;
}
@font-face {
    font-family: 'alegreya';
    src:url('fonts/AlegreyaBlackItalic.ttf');
    font-weight:bold;
    font-style: italic, oblique;
}

这是我班上的一条规则:

.font-alegreya {
    font-family:alegreya;
}

最后是HTML:

<li class="font-alegreya" data-styles="bold, italic, extrabold">
    Alegreya - Some sample words.
</li>

现在,我已经在metaltoad和SO的其他地方读到,使用单个字体家族是利用自定义字体的首选方法,并且必须将粗体斜体放在最后。

问题是字体显示为斜体通过font-weight:normal在CSS类中使用,我获得了正常的显示权重,但font-style:normal并没有清除斜体字。这是有道理的,因为在“资源”选项卡的(-webkit)“开发人员工具”下,我只看到black-italic加载字体(在CSS文件中第二个)。该字体已安装在我的计算机上,但我在服务器上重命名了该文件。

我已经在Opera(webkit)和IE11中观察到了这一点,所以这是我的代码。

编辑:如评论中所述,我将粗体和黑色倒置。那就是大胆的原因。但是斜体仍然是一个问题。

约西亚

正如大卫·斯通(David Stone)关于权威问题的答案@fontface所言,该规范说这oblique, italic是有效的。

正如他所说,FF 3.6不喜欢这两个值。埋在评论中,有更多关于二值不起作用的报告。

在研究webkit错误报告时,我发现font-style规范指定的值从CSS2更改为CSS3。根据更高的css3规范,该font-style属性仅允许使用一个值,而不是逗号分隔的列表。

因此,如今,如果您输入以逗号分隔的列表,则呈现引擎会说“这不是有效的字体样式。它们一定是故意的normal。” 并覆盖您之前的常规声明。

tl; dr:如果字体是呈现所有斜体字体:

font-style: italic, oblique;

应该

font-style: italic;

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

@fontface CSS字体路径似乎不起作用

来自分类Dev

使用require.js字体插件加载Google Web字体

来自分类Dev

粗体/斜体不适用于使用PhantomJS的自定义字体

来自分类Dev

MathJax字体不带斜体

来自分类Dev

无法设置字体类的斜体属性

来自分类Dev

使TextView使用具有不同样式(常规和斜体)的自定义字体

来自分类Dev

使用子域时无法加载字体

来自分类Dev

matplotlib中的非斜体Latex字体

来自分类Dev

如何使用斜体Google字体?

来自分类Dev

UILabel斜体字体裁剪

来自分类Dev

如何使用字体-很棒的加载图像

来自分类Dev

如何加载字体并使用TextGeometry进行渲染

来自分类Dev

如何使用NPOI 2.2.1.0将字体指定为“斜体”?

来自分类Dev

粗体/斜体时如何更改Java BasicHTML视图中使用的字体

来自分类Dev

无法使用Webpack加载超棒的字体

来自分类Dev

ITextSharp一起使用多种字体样式。例如,粗体,带下划线,斜体等

来自分类Dev

使用下标定义xlabel或ylabel时如何在python中禁用斜体字体

来自分类Dev

如何在ggtree的系统树中的同一标签中同时使用斜体和普通字体

来自分类Dev

本地字体声明未加载斜体/粗体

来自分类Dev

浏览器使用FontFace延迟加载字体

来自分类Dev

@fontface CSS字体路径似乎不起作用

来自分类Dev

使TextView使用具有不同样式(常规和斜体)的自定义字体

来自分类Dev

字体无法使用html加载

来自分类Dev

Archlinux如何从常规字体生成斜体样式

来自分类Dev

我如何从webroot外部加载codeigniter字体真棒fontface url?

来自分类Dev

如何为自定义字体使用粗体,常规和斜体字体样式?

来自分类Dev

我可以使用库PhenX / php-font-lib获得斜体/粗体/浅色等字体吗?

来自分类Dev

st终端:禁用粗体/斜体字体

来自分类Dev

通常使用转换倾斜而不是字体样式的斜体

Related 相关文章

  1. 1

    @fontface CSS字体路径似乎不起作用

  2. 2

    使用require.js字体插件加载Google Web字体

  3. 3

    粗体/斜体不适用于使用PhantomJS的自定义字体

  4. 4

    MathJax字体不带斜体

  5. 5

    无法设置字体类的斜体属性

  6. 6

    使TextView使用具有不同样式(常规和斜体)的自定义字体

  7. 7

    使用子域时无法加载字体

  8. 8

    matplotlib中的非斜体Latex字体

  9. 9

    如何使用斜体Google字体?

  10. 10

    UILabel斜体字体裁剪

  11. 11

    如何使用字体-很棒的加载图像

  12. 12

    如何加载字体并使用TextGeometry进行渲染

  13. 13

    如何使用NPOI 2.2.1.0将字体指定为“斜体”?

  14. 14

    粗体/斜体时如何更改Java BasicHTML视图中使用的字体

  15. 15

    无法使用Webpack加载超棒的字体

  16. 16

    ITextSharp一起使用多种字体样式。例如,粗体,带下划线,斜体等

  17. 17

    使用下标定义xlabel或ylabel时如何在python中禁用斜体字体

  18. 18

    如何在ggtree的系统树中的同一标签中同时使用斜体和普通字体

  19. 19

    本地字体声明未加载斜体/粗体

  20. 20

    浏览器使用FontFace延迟加载字体

  21. 21

    @fontface CSS字体路径似乎不起作用

  22. 22

    使TextView使用具有不同样式(常规和斜体)的自定义字体

  23. 23

    字体无法使用html加载

  24. 24

    Archlinux如何从常规字体生成斜体样式

  25. 25

    我如何从webroot外部加载codeigniter字体真棒fontface url?

  26. 26

    如何为自定义字体使用粗体,常规和斜体字体样式?

  27. 27

    我可以使用库PhenX / php-font-lib获得斜体/粗体/浅色等字体吗?

  28. 28

    st终端:禁用粗体/斜体字体

  29. 29

    通常使用转换倾斜而不是字体样式的斜体

热门标签

归档