如何妥善的设置网页的字体

泽泽社长

发布于 2023-04-17 17:44:01

1.2K0

文章被收录于专栏：泽泽社泽泽社

在写模板时很纠结字体怎么写，于是找了几个网站抄了下字体配置。但是这个问题还是困扰我心！

就在昨天突然看到github上的一个项目，这个项目就是简单粗暴的办法就是把各个平台的安全字体提取出来，用优先级搞一下。

项目地址：https://github.com/zenozeng/fonts.css DEMO：https://zenozeng.github.io/fonts.css/

这个项目罗列了三种字体：黑体，楷体，宋体

使用方法，以楷体为例

   <head>
    <link rel="stylesheet" type="text/css" href="fonts.css" />
</head>
<body>
    <p class="font-kai">
        故天将降大任于是人也必先苦其心智劳其筋骨饿其体肤空乏其身行弗乱其所为所以动心忍性曾益其所不能
    </p>
</body>

也可以简单粗暴的把它里面的字体配置复制出来，放到自己的css的body中,下面以黑体为例

body{
font-family: -apple-system, "Helvetica Neue", Helvetica, "Nimbus Sans L", Arial, "Liberation Sans", "PingFang SC", "Hiragino Sans GB", "Source Han Sans CN", "Source Han Sans SC", "Microsoft YaHei", "Wenquanyi Micro Hei", "WenQuanYi Zen Hei", "ST Heiti", SimHei, "WenQuanYi Zen Hei Sharp", sans-serif;
}

这个项目也许看似闲的蛋疼，但是程序员也许就是有着这样的奇怪强迫症的一群人吧？

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

如有侵权请联系 cloudcommunity@tencent.com 删除

css