网站使用自定义字体的方法

• 4 分钟阅读 • web

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

加载本地字体或CDN字体

css:

@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服务托管字体

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

添加新字体:

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

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

可用字体

楷体: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

下面是毛主席诗词:
{% raw %}

沁园春·雪

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

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


浪淘沙·北戴河

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

往事越千年,魏武挥鞭,东临碣石有遗篇。萧瑟秋风今又是,换了人间。
{% endraw %}
文章标签: web

上一篇 : geakos初体验
下一篇 : 从valine迁移到waline及数据导入
留言
阅读进度 0%