QQ爹の博客 QQ爹の博客

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

in 实用技巧 文章转载请注明来源!

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

就在昨天突然看到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;
}

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

jrotty WeChat Pay

微信打赏

jrotty Alipay

支付宝打赏

文章二维码

扫描二维码,在手机上阅读!

前端字体
发表新评论
已有 8 条评论
  1. Tokin
    TokinMac OS X谷歌浏览器
    回复

    然并卵,网页做多了,自然会有自己的一套css格式化代码。。。

    1. Jrotty
      Jrotty本文作者Windows 10谷歌浏览器
      回复

      @Tokin 然而对于我这样没做多的人来说,这个很有用的

      1. 香菇
        香菇Windows 10谷歌浏览器
        回复

        @Jrotty 为什么我没有。。

        1. Jrotty
          Jrotty本文作者Android NUC浏览器
          回复

          @香菇 无他,唯手熟尔

  2. Ice-Hazymoon
    Ice-HazymoonWindows 10谷歌浏览器
    回复

    哇,最近突然开始高产

    1. Jrotty
      Jrotty本文作者Linux谷歌浏览器
      回复

      @Ice-Hazymoon 因为技能冷却时间过来哈哈哈

  3. c0smxsec
    c0smxsecLinux谷歌浏览器
    回复

    苟利国家生死以,岂因祸福避趋之。

    1. Jrotty
      Jrotty本文作者Windows 10谷歌浏览器
      回复

      @c0smxsec 评论区不养狗

PREVIOUS NEXT
雷姆
拉姆
音乐加载中...
0:00