【测试】设置网站全局字体并单独设置标题字体

AI智能总结:

本文介绍了如何为博客更换字体，包括全站字体和标题字体的自定义设置。通过提供CSS代码示例，展示了如何使用自定义字体以及为特定元素（如标题）指定字体，提升网页的美观性和可读性。

极限免责声明

这是我博客换域名之前写的一篇水文，挺简单的一篇文章。重新把它发出来，主要是最近在搞友链订阅。这篇文章在测试友链rss订阅的工作情况(见网站侧边栏喵友文坛，显示不出来的可以ctrl➕f5刷新)，所以说大家可以忽略一下，当然如果真的是小白的话，学习一下也可以。

前言

博客如果用上自定义字体的话，可读性会增加，也避免了因为用户设备不同显示错误的可能性，所以写一篇教程介绍如何更换字体。

全站字体

不废话

  @font-face {
  font-family: 'Font';
  font-display: swap;
  src: url('/fonts/Font.ttf') format("truetype");  
}

在这段代码中，url后面引号里面放上你的字体链接，即可直接使用

解释:

font-display: swap;

这一行代表着如果网站字体没加载完，就用原来的字体

format("truetype");

这一部分表示将字体以正确的形式加载。

font-family: 'Font';

这一部分代表字体的自定义名称，来个小名

如果你的网站是HTML，可以给它放入css
如果你像我一样使用handsome为主题，可以给放到自定义css里面，只需要把链接改一下就能用。
这里我推荐落霞孤鹜大佬的字体lxgw文楷，也就是本网站正文使用的字体，非常的简洁好看，可读性极强，兼容字字数很多，或者落霞臻楷也不错。

标题字体

但是让我写这篇文章的并不是全站字体，是因为近期我想更改一个好看的标题字体。
对于我的这个需求，我们可以继续创建一段css代码来实现。

@font-face {
    font-family: 'CustomFont';
font-display: swap;
src:url('https://cdn.xxhzm.cn/FontLIbs/6.ttf') format('truetype'); 
}

h1 {
    font-family: 'CustomFont', sans-serif; /* 应用自定义字体，并指定备选字体 */
}

解释:前面的都是一样的，详见上面。
后面那一行是给所有的h1标签全部绑定到这个字体上，如果这个字体找不到，就用逗号后面的这个sans系统自带字体

总结

通过这两种代码，我们可以分别给网站页内所有的标题和正文换上好看的字体，增加美观性和可读性。

碎碎念

不过如果你问我为什么我的标题没有用自定义字体？
我的回答是 因为我尝试了好多字体，结果和这个正文字体并不搭，好像没有那么好看，不过本文介绍的只是可行方案，说不定大家搭配合适的字体之后就好看