网站使用自定义字体的方法
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服务托管字体
-
字体转换
把ttf字体转换成woff2格式,
在https://cloudconvert.com/ttf-to-woff2 ,
https://fontsource.org/tools/converter 都可以在线转换。 -
github托管
建立一个仓库fonts,例如qs100371/fonts,把字体上传。
方法:
本地建立fonts目录,cmd进入(windows系统,已安装git):
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不需梯子,但可能要重试多次才成功。
- 获取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
下面是毛主席诗词:
{% raw %}
沁园春·雪
北国风光,千里冰封,万里雪飘。望长城内外,惟余莽莽;大河上下,顿失滔滔。山舞银蛇,原驰蜡象,欲与天公试比高。须晴日,看红装素裹,分外妖娆。
江山如此多娇,引无数英雄竞折腰。惜秦皇汉武,略输文采;唐宗宋祖,稍逊风骚。一代天骄,成吉思汗,只识弯弓射大雕。俱往矣,数风流人物,还看今朝。
江山如此多娇,引无数英雄竞折腰。惜秦皇汉武,略输文采;唐宗宋祖,稍逊风骚。一代天骄,成吉思汗,只识弯弓射大雕。俱往矣,数风流人物,还看今朝。
浪淘沙·北戴河
大雨落幽燕,白浪滔天,秦皇岛外打鱼船。一片汪洋都不见,知向谁边?
往事越千年,魏武挥鞭,东临碣石有遗篇。萧瑟秋风今又是,换了人间。
{% endraw %}
往事越千年,魏武挥鞭,东临碣石有遗篇。萧瑟秋风今又是,换了人间。