Typecho 自定义网站字体：推荐与教程

最新推荐文章于 2025-05-01 14:44:35 发布

6v6-博客

最新推荐文章于 2025-05-01 14:44:35 发布

阅读量904

点赞数 25

文章标签： typescript 机器学习

本文链接：https://blog.csdn.net/2503_90908880/article/details/146056515

版权

Typecho 自定义网站字体：推荐与教程

在 Typecho 网站中，自定义字体是提升网站视觉效果的重要方式之一。本文将推荐几款适合网站使用的字体，并教你如何在 Typecho 中自定义字体。

如何在 Typecho 中自定义字体

方法 1：通过 CSS 引入 Google Fonts

打开 Typecho 主题的 header.php 文件。

在 <head> 标签内添加 Google Fonts 的链接：

<link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet">

在主题的 style.css 文件中设置字体：

body {
    font-family: 'Roboto', sans-serif;
}

方法 2：使用本地字体

将字体文件（如 .ttf 或 .woff）上传到 Typecho 主题的 fonts 文件夹中。

在主题的 style.css 文件中定义字体：

@font-face {
    font-family: 'MyCustomFont';
    src: url('fonts/MyCustomFont.woff2') format('woff2'),
         url('fonts/MyCustomFont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
body {
    font-family: 'MyCustomFont', sans-serif;
}

方法 3：使用插件

安装 Typecho 插件，如 Custom Fonts。
在插件设置中上传字体文件并应用。

注意事项

字体加载速度：使用外部字体（如 Google Fonts）时，注意加载速度，避免影响用户体验。
版权问题：确保使用的字体可以免费商用，避免侵权。
兼容性：为不同浏览器提供多种字体格式（如 .woff、.woff2）。

了解更多技术内容，请访问：6v6博客

Typecho 自定义网站字体：推荐与教程

Typecho 自定义网站字体：推荐与教程

推荐字体

1. 思源黑体（Source Han Sans）

2. 站酷字体（ZCOOL）

3. 阿里巴巴普惠体（Alibaba Sans）

4. Google Fonts 字体

5. 本地字体

如何在 Typecho 中自定义字体

方法 1：通过 CSS 引入 Google Fonts

方法 2：使用本地字体

方法 3：使用插件

注意事项