Font embedding in wordpress

时间:2016-08-01 作者:stech546

我正在将wordpress(最新版本)与此模板一起使用。该模板使用visual composer页面。我有一个(授权的)希伯来文字体,4种字体,黑色/粗体/浅色/普通。

我知道如何通过将字体应用于整个主题。css中的body调用,但问题是标题类型/样式没有从我定义的列表中选择正确的字体,看起来它总是使用相同的粗体字体,而且从原因来看,它看起来很糟糕/被剪裁。

我在购买时,从字体所有者那里收到了每种重量4个文件。TTF、SVG、EOT、WOFF。所以总共是4x4个16个文件。

嵌入字体但保持原始主题大小和权重的项目的正确方法是什么?

你的建议很有帮助。谢谢

1 个回复
SO网友:liquidRock

我从来没有在WordPress中使用过希伯来文字体,所以除非是特殊情况,否则应该是常用的@字体。不确定您的问题是什么,因为您没有发布任何代码。

大小可能会根据字体的设计而变化。有些字体大小取决于谁设计的。

声明字体时可以设置的权重。如果它们太大或太小,只需添加一个font-size: 并以.1em的增量增加或减少它们,直到正确为止。我在使用<span> 或符号字体:before 确保尺寸一致。您可能还需要使用vertical-align 如果在<span>:before:after 在其他字体之间,即。vertical-align:2pxvertical-align:-2px 具有display:inline-block (我相信)。

declare the fonts:

@font-face {
    font-family: \'Some Font\';
    src: url(\'some-font.eot\');
    src: url(\'some-font.eot?#iefix\') format(\'embedded-opentype\'),
         url(\'some-font.woff2\') format(\'woff2\'),
         url(\'some-font.woff\') format(\'woff\'),
         url(\'some-font.ttf\') format(\'truetype\'),
         url(\'some-font.svg#somefont\') format(\'svg\');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: \'Some Font\';
    src: url(\'some-font-bold.eot\');
    src: url(\'some-font-bold.eot?#iefix\') format(\'embedded-opentype\'),
         url(\'some-font-bold.woff2\') format(\'woff2\'),
         url(\'some-font-bold.woff\') format(\'woff\'),
         url(\'some-font-bold.ttf\') format(\'truetype\'),
         url(\'some-font-bold.svg#somefontbold\') format(\'svg\');
    font-weight: 500;
    font-style: normal;
}
@font-face {
    font-family: \'Some Font\';
    src: url(\'some-font-light.eot\');
    src: url(\'some-font-light.eot?#iefix\') format(\'embedded-opentype\'),
         url(\'some-font-light.woff2\') format(\'woff2\'),
         url(\'some-font-light.woff\') format(\'woff\'),
         url(\'some-font-light.ttf\') format(\'truetype\'),
         url(\'some-font-light.svg#somefontlight\') format(\'svg\');
    font-weight: 300;
    font-style: normal;
}

then add them to whatever you want as usual:

.myClass { font-family:\'Some Font\'; font-weight:500; font-style:normal; }
您不需要使用font-style:normal 如果您的CSS中有重置,则可以使用它。