WordPress网站引入字体文件
这里以NotoSansSCForSite.woff2
字体文件进行举例,下文中存储路径均可根据实际情况进行调整。
以下是将名为NotoSansSCForSite.woff2
的字体文件引入WordPress网站的完整代码示例,包括定义字体和应用字体的CSS代码。
一、上传字体文件到服务器
- 创建字体目录:
- 在WordPress网站的根目录下,创建一个专门的字体目录。例如,可以创建
fonts
目录,路径为:/wp-content/themes/your-theme/fonts/
其中your-theme
是你的主题名称。
- 上传字体文件:
- 将
NotoSansSCForSite.woff2
文件上传到刚才创建的fonts
目录中。你可以使用FTP工具(如FileZilla)或通过WordPress后台的文件管理功能来上传。
二、在CSS中引入字体
- 编辑主题的CSS文件:
- 打开你的WordPress主题的CSS文件。通常位于:
/wp-content/themes/your-theme/style.css
如果你的主题使用了子主题,建议在子主题的style.css
中进行修改,以避免主题更新时丢失自定义样式。
- 使用
@font-face
规则:
- 在
style.css
文件中,使用@font-face
规则来定义你的自定义字体。例如:
@font-face {
font-family: 'CustomFont';
src: url('/wp-content/themes/your-theme/fonts/custom-font.woff2') format('woff2'),
url('/wp-content/themes/your-theme/fonts/custom-font.woff') format('woff');
font-weight: normal;
font-style: normal;
font-display: swap; /* 推荐使用swap */
}
font-family
:定义字体的名称,后续在CSS中通过这个名称引用字体。src
:指定字体文件的路径和格式。这里只使用了.woff2
格式,因为它体积小且兼容性好。font-weight
和font-style
:定义字体的粗细和样式。如果需要其他样式(如粗体或斜体),可以额外定义。font-display: swap
:在字体加载期间显示备用字体,字体加载完成后切换到自定义字体,避免页面闪烁。
- 应用字体到页面元素:
- 在CSS中,通过
font-family
属性将自定义字体应用到需要的页面元素上。例如:
body {
font-family: 'NotoSansSCForSite', sans-serif; /* 应用到整个页面的正文 */
}
h1, h2, h3 {
font-family: 'NotoSansSCForSite', serif; /* 应用到标题 */
}
以下是完整代码信息
/* 定义自定义字体 */
@font-face {
font-family: 'NotoSansSCForSite'; /* 自定义字体名称 */
src: url('/wp-content/themes/your-theme/fonts/NotoSansSCForSite.woff2') format('woff2');
font-weight: normal; /* 字体粗细 */
font-style: normal; /* 字体样式 */
font-display: swap; /* 优化字体加载性能 */
}
/* 应用自定义字体到页面元素 */
body {
font-family: 'NotoSansSCForSite', sans-serif; /* 应用到整个页面的正文 */
}
h1, h2, h3, h4, h5, h6 {
font-family: 'NotoSansSCForSite', serif; /* 应用到所有标题 */
}
/* 如果需要为特定元素设置不同的字体样式,可以继续添加 */
p {
font-family: 'NotoSansSCForSite', sans-serif; /* 应用到段落 */
}
a {
font-family: 'NotoSansSCForSite', sans-serif; /* 应用到链接 */
}
/* 如果需要为其他元素设置字体,可以继续添加 */
三、测试字体
- 保存CSS文件:
- 保存修改后的
style.css
文件。
- 清除缓存:
- 如果你的网站使用了缓存插件(如W3 Total Cache、WP Rocket等),请清除缓存以确保更改生效。
- 查看效果:
- 在浏览器中打开你的WordPress网站,检查字体是否正确显示。
- 测试不同浏览器(如Chrome、Firefox、Safari等)和设备(如桌面电脑、手机等)的兼容性。
四、优化字体加载性能
- 如果字体文件较大,可以使用
font-display: swap
属性来优化加载性能,确保在字体加载期间显示备用字体,避免页面闪烁。 - 如果需要进一步优化,可以考虑使用字体子集(subset)。例如,如果你的网站主要使用中文字符,可以只包含中文字符的子集,减少字体文件大小。
通过以上步骤,你可以将NotoSansSCForSite.woff2
字体文件成功引入到WordPress网站中,并确保其正确显示和优化加载性能。
空空如也!