windows，mac，ios，android上各自字体不一样，网站可以加载本地字体或CDN字体来保持不同平台的一致。

加载本地字体或CDN字体

css：

1
2
3
4
5
6
7
8
9
10
11
12
@font-face {
  font-family: 'MyCustomFont';
  src: url('https://cdn.jsdelivr.net/gh/yourname/my-fonts/MyFont.woff2') format('woff2') 或
       url('/my-fonts/MyFont.woff2') format('woff');
  font-weight: normal;
  font-style: normal;
  font-display: swap; /* 优化加载体验，避免FOIT（无样式文本闪烁） */
}

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

/my-fonts/MyFont.woff 是本地字体；
https://cdn.jsdelivr.net/gh/yourname/my-fonts/MyFont.woff2 是CDN字体。

利用现有CDN服务托管字体

  • 字体转换
    把ttf字体转换成woff2格式，
    在https://cloudconvert.com/ttf-to-woff2 ，
    https://fontsource.org/tools/converter 都可以在线转换。

  • github托管
    建立一个仓库fonts，例如qs100371/fonts，把字体上传。
    方法：
    本地建立fonts目录，cmd进入（windows系统，已安装git）：

    1
    2
    3
    4
    5
    6
    git init
    git add MyFont.woff2
    git commit -m "first commit"
    git branch -M main
    git remote add origin https://github.com/qs100371/fonts.git
    git push -u origin main

    添加新字体：

    1
    2
    3
    4
    git add MyFont.woff2
    git commit -m "first commit"
    git branch -M main
    git push -u origin main

    git push不需梯子，但可能要重试多次才成功。

  • 获取CDN链接
    https://cdn.jsdelivr.net/gh/qs100371/fonts/MyFont.woff2
    这个链接在css中直接引用。

可用字体

楷体：https://cdn.jsdelivr.net/gh/qs100371/fonts/simkai.woff2
华文楷体：https://cdn.jsdelivr.net/gh/qs100371/fonts/kaiti.woff2
毛体：https://cdn.jsdelivr.net/gh/qs100371/fonts/maozedong.woff2
汉仪行楷简：https://cdn.jsdelivr.net/gh/qs100371/fonts/hanyixingkaijian.woff2

下面是毛主席诗词：

沁园春·雪

北国风光，千里冰封，万里雪飘。望长城内外，惟余莽莽；大河上下，顿失滔滔。山舞银蛇，原驰蜡象，欲与天公试比高。须晴日，看红装素裹，分外妖娆。

江山如此多娇，引无数英雄竞折腰。惜秦皇汉武，略输文采；唐宗宋祖，稍逊风骚。一代天骄，成吉思汗，只识弯弓射大雕。俱往矣，数风流人物，还看今朝。


浪淘沙·北戴河

大雨落幽燕，白浪滔天，秦皇岛外打鱼船。一片汪洋都不见，知向谁边？

往事越千年，魏武挥鞭，东临碣石有遗篇。萧瑟秋风今又是，换了人间。