thumbnail

前言

其实我在不管应用哪款主题，或者是站点创建后，我一般都会选择一款正式字体来作为站点的默认字体，以确保某在某些设备或者不同字体的设备上本站内容依然能正确、明确的表达需要传达的内容。当然这只是我个人的习惯~
HOMIE

正文

回归正题，本篇文章如标题所示，就是简单记录一下Nvpress更换字体的一个小教程，然后顺便分享一下我自己常用的一些字体文件，本教程呢大致跟WordPress更改的方式差不多所以不过多的做别的介绍。

找到站点后台的外观——主题设置——自定义head

输入以下内容

<script>
// 当页面加载完成后执行函数
window.onload = function() {
    // 使用CSS属性设置方法来改变页面的字体样式
    // 'font-family' 是CSS属性，用于设置字体
    // 'btfFont' 是字体的名称，这里可能是一个自定义字体
    // 'important' 是CSS的优先级声明，表示这个样式应该优先应用
    document.body.style.setProperty('font-family', 'btfFont', 'important');
};
</script>

<!-- 链接到一个外部的CSS样式表 -->
<!-- href属性指定了样式表的URL -->
<link rel="stylesheet" href="https://pic.ffnb.top/ziti.css">

以下为ziti.css的内容

/* @font-face规则用于定义一个自定义字体 */
@font-face {
  /* font-family属性定义了字体的名称，这里命名为'btfFont' */
  font-family: 'btfFont'; /* 定义字体名称 */
  /* src属性指定了字体文件的URL，这里是字体文件的链接 */
  /* format属性指定了字体文件的格式，这里是'woff2' */
  src: url('https://pic.ffnb.top/HarOS.woff2') format('woff2'); /* 指定字体文件的URL和格式 */
}

/* 选择器'body'用于选择HTML文档中的body元素 */
body {
  /* font-family属性用于设置字体 */
  /* 'btfFont'是之前定义的自定义字体名称 */
  /* 'sans-serif'是一个通用字体族，用作备选字体 */
  /* '!important'声明这个属性的优先级更高，确保自定义字体被应用 */
  font-family: 'btfFont', sans-serif !important; /* 将自定义字体应用于body元素，并添加通用字体作为备选 */
}

是分开调用的，当然你也可以将他们合并成一段来使用，注释仅供参考，实际应用可将注释删除。

分享一些自用字体

HarmonyOS字体，免费商用字体，经压缩成woff2格式后大小是855.73kb，也是本站应用的字体

除了上面这款字体，我其实还有准备一些别的woff2格式的字体，只是我建议用这款，如果需要换别的字体也可根据自己想要的字体替换，只是要记得别用商用字体哦，避免侵权。

字体分享下载