给WP网站添加自定义字体:手动安装WordPress自定义字体

通过@ font-face指令,您可以将一种或几种字体都连接到您的站点。但是这种方法有其优点和缺点。

优点

  • 通过CSS,您可以连接任何格式的字体:ttf,otf,woff,svg。
  • 字体文件将位于您的服务器上–您将不依赖于第三方服务。

缺点

  • 为了正确连接每种样式的字体,您需要注册一个单独的代码。
  • 不了解CSS,您很容易感到困惑。

但是,如果您可以简单地复制完成的代码并需要在其中指定值,那么这并不是一个真正的问题。

注意:开始之前,请确保为您的网站创建子主题。这样,您可以对子主题进行所有编辑,而保持核心主题不变,以便将来可以根据需要轻松对其进行更新。

第一步:获取要使用字体的文件格式

.TTF或.OTF格式字体,适用于Firefox 3.5、Safari、Opera浏览器

.EOT格式字体,适用于Internet Explorer 4.0+浏览器

.SVG格式字体,适用于Chrome、IPhone浏览器

通常我们在网上只能下载到一种格式的字体,确保能在主流浏览器中都能正常显示该字体。

我们可以使用下载的字体在下方的网站中做字体格式转化:

http://www.fontsquirrel.com/fontface/generator

第二步:创建一个“字体”文件夹

在您的子主题中,在以下位置创建一个新的“字体”文件夹:wp-content / themes / your-child-theme / fonts;

通过主机的控制面板或FTP完成,将所有字体文件添加到新添加的字体文​​件夹中。

第三步:通过子主题样式表导入字体

常规字体,在样式表中声明该字体

打开您的子主题的style.css文件,并将以下代码添加到CSS文件的开头(在子主题注释之后):

@font-face{
font-family: 'MyWebFont';
src: url('fonts/WebFont.eot');
src: url('fonts/WebFont.eot?#iefix') format('embedded-opentype'),
url('fonts/WebFont.woff') format('woff'),
url('fonts/WebFont.ttf') format('truetype'),
url('fonts/WebFont.svg#svgwebfont') format('svg');
font-weight: normal;
font-style: normal;
}

其中MyWebFon t是字体的名称,而src属性的值(带引号的括号中的数据)是其位置(相对链接)。我们需要分别指定每种样式。

因为我们首先连接了普通样式,所以我们将font-weight和font-style属性设置为normal。

添加斜体时,请编写以下内容:

@font-face{
font-family: 'MyWebFont';
src: url('fonts/WebFont-Italic.eot');
src: url('fonts/WebFont-Italic.eot?#iefix') format('embedded-opentype'),
url('fonts/WebFont-Italic.woff') format('woff'),
url('fonts/WebFont-Italic.ttf') format('truetype'),
url('fonts/WebFont-Italic.svg#svgwebfont') format('svg');
font-weight: normal;
font-style: italic;
}

在所有内容相同的地方,只有我们将font-style属性附加到斜体上。

要添加粗体字体,请添加以下代码:

@font-face{
font-family: 'MyWebFont';
src: url('fonts/WebFont-Bold.eot');
src: url('fonts/WebFont-Bold.eot?#iefix') format('embedded-opentype'),
url('fonts/WebFont-Bold.woff') format('woff'),
url('fonts/WebFont-Bold.ttf') format('truetype'),
url('fonts/WebFont-Bold.svg#svgwebfont') format('svg');
font-weight: bold;
font-style: normal;
}

我们将font-weight属性设置为粗体的位置。

请记住为每种样式指示字体文件的正确位置。

要连接粗体斜体,请键入以下内容:

@font-face{
font-family: 'MyWebFont';
src: url('fonts/WebFont-Italic-Bold.eot');
src: url('fonts/WebFont-Italic-Bold.eot?#iefix') format('embedded-opentype'),
url('fonts/WebFont-Italic-Bold.woff') format('woff'),
url('fonts/WebFont-Italic-Bold.ttf') format('truetype'),
url('fonts/WebFont-Italic-Bold.svg#svgwebfont') format('svg');
font-weight: bold;
font-style: italic;
}

好了,仅此而已现在,您已经将四种字体样式连接到您的网站。

第四步: 在需要调用的地方添加如下代码

以全局字体为例,大家可以根据具体情况进行修改

body {
font-family: ‘MyWebFont’;
}

到现在,可以去刷新下网站,就可以看到新字体加载成功了。

发表评论

后才能评论