WordPress自定义默认字体

在WordPress中，使用霞鹜文楷屏幕阅版字体，或其他字体。

1,253字

5–8 分钟

2025年12月12日

一台云服务器

blog.t725.cn/?p=1940

WordPress支持上传字体文件，来使用自定义文件，但上传没有使用免费公共的字体服务更加方便。如果需要了解<霞鹜文楷、霞鹜文楷屏幕阅读版>字体，请看这里。

1、在网页的<head>标签内适当位置添加字体文件引用

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/lxgw-wenkai-screen-webfont@1.7.0/style.min.css">

在WordPress的实现方法：wp-admin / 工具 / 主题文件编辑器 / functions.php

function my_custom_head_code() {
    // 引入霞鹜文楷屏幕阅读版字体 CSS
    echo '<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/lxgw-wenkai-screen-webfont@1.7.0/style.min.css">' . "\n";
}
add_action('wp_head', 'my_custom_head_code');

WordPress提供了一个标准的钩子wp_head，它会在每个页面渲染时自动执行挂载在其上的函数。该钩子位于主题的header.php中，通常以<?php wp_head(); ?>形式存在。通过在子主题的functions.php文件中，使用add_action()函数绑定自定义回调，可以插入任意HTML或脚本内容到<head>区域。

2、接着，在你的 CSS 中使用字体。

body {
    /* 默认为霞鹜文楷屏幕版字体 */
    font-family: "LXGW WenKai Screen", sans-serif;
}

WordPress的实现方法：wp-admin / 主题 / 编辑 / 样式 / 额外CSS
- 代码块使用默认的Fira Code字段，但其他内容，全使用霞鹜文楷屏幕版字体

body {
    /* 默认为霞鹜文楷屏幕版字体 */
    font-family: "LXGW WenKai Screen", sans-serif;
}
/* 内联代码样式，且指定字体为Fira Code*/
code {
    background-color: #FBFAF3;
    border-radius: 0.2rem;
    color: inherit;
    font-size: 100%;
    font-family: "Fira Code", monospace;
    padding: 0em 0.5em 0em 0.5em;
    text-decoration: none;
    white-space: nowrap;
}
/* 文章段落首行缩进，但分栏里段落不做缩进（比如标签云的块），只对div的id有效。*/
.wp-block-post-content p {
    text-indent: 2em;
}
.wp-block-columns p {
    text-indent: 0em;
}
/* 代码块指定字体为Fira Code */
.wp-block-code code {
    font-family: "Fira Code", monospace;
}

发表回复取消回复