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

网站搭建教程 2年前免费

通过@ 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;
}

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