侧边栏壁纸

免费引入商用黑体字体系列整理及 CSS 字体引入亲妈式教程

  • 小妖精资源 2024年09月25日 187阅读 0评论
  • 介绍:文章介绍了如何免费引入商用黑体字体系列并在网页中应用CSS字体。提供了各大厂商的免费字体列表及引用链接,以及在网页中引入字体的具体方式。解释了字体的字重设置和字重使用方法,以及font-display swap的作用。此外,还介绍了unicode-range的优化方式和使用woff2字体格式的好处。最后指出,即使在Windows系统中安装苹方字体,其他字体在Windows上也能有出色的显示效果。

    由于微软雅黑的设计太过老旧,所以很多网站在设置font-family字体家族时,都会首先引入苹果的苹方字体(PingFang SC)。一来为了照顾 MAC,二来可以改善 Windows 上显示效果(已安装苹方字体的前提)。现在,一些厂商会在官网上引入自己研发的字体。感谢各大厂商没有禁止 woff 字体文件跨域使用,可以让我们白嫖,因为你们的字体是真的漂亮,并且以下字体可以个人免费使用。

    字体列表及引用链接

    Google https://fonts.google.com(需 VPN)
    Adobe https://fonts.adobe.com(需授权)
    阿里巴巴 https://fonts.alibabagroup.com
    钉钉进步体 https://page.dingtalk.com/wow/dingtalk/default/dingtalk/y-W5aF3_ZJwzulU0nceIl
    斗鱼追光体 https://www.douyu.com/topic/douyuZGT
    快看世界体 https://www.kuaikanmanhua.com/webs/fontPromotion
    Mi Sans https://hyperos.mi.com/font/zh/
    HarmonyOS Sans https://developer.huawei.com/consumer/cn/design/resource-V1
    OPPO Sans https://www.coloros.com/index/newsDetail?id=72

    网页引入

    Noto Sans Google 可变 https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@100..900&display=swap
    Mi Sans 小米 多种 https://font.sec.miui.com/font/css?family=MiSans:0:Chinese_Simplify,Latin&display=swap
    可变 https://cdn-font.hyperos.mi.com/font/css?family=MiSans_VF:VF:Chinese_Simplify,Latin&display=swap
    HarmonyOS Sans B 站 400 https://s1.hdslb.com/bfs/static/jinkela/long/font/regular.css
    500 https://s1.hdslb.com/bfs/static/jinkela/long/font/medium.css
    OPPO Sans#1 OPPO 400 https://code.oppo.com/content/dam/oppo/common/fonts/font2/new-font/OPPOSansOS2-5000-Regular.woff2
    500 https://code.oppo.com/content/dam/oppo/common/fonts/font2/new-font/OPPOSansOS2-5000-Medium.woff2
    华康金刚黑#2 字节跳动 400 https://fonts.bytedance.com/dfd/api/v1/css?family=DFPKingGothicGB-Regular&display=swap
    500 https://fonts.bytedance.com/dfd/api/v1/css?family=DFPKingGothicGB-medium&display=swap

    OPPO 的在线引用 WOFF2 截取了 5000 字,因此在一些不常用的字上回出现不显示的情况
    华康金刚黑实际和苹方是一个字体,因此需要授权才可使用。虽然 cdn 是可以跨域使用,但请谨慎。

    引入字体

    上述字体列表链接中,若是 css 链接可直接引用,若是 woff 字体链接需在你的 css 文件中引入。具体方式见下:

    CSS

    WOFF2

    完成上述引入字体文件后,那么在需要使用的元素处设定 css 属性 font-family 中输入字体名称即可,注意:字体名称要和引用的字体名称相同。

    字重说明

    浏览器默认字重 400,假如对标题想要使用粗体该如何操作呢?在设定字体字重时会有两种不同的呈现效果方式。

    情况一

    情况二

    你会发现,无论是否使用相同名称,font-weight 的值都必须要与实际的字体字重文件匹配。若使用不同的字体名称,一方面增加代码工作量,另一方面还不易解读。因此,通过两个字重的使用方式,如果从便于管理的角度来看,情况一更为方便。

    font-display swap 说明

    你会发现很多引入字体的文件都会标注这个属性,它的作用是在没有加载出字体前,优先加载本地字体进行渲染,避免网页出现空屏。若您想了解关于该部分的研究资料及加载字体所带来的影响,推荐您查看该文章 《知乎:一种减少字体加载影响的新方法:CSS 字体描述符(译)》

    unicode-range 优化说明

    当你引入官方的 css 字体链接后,有些文件里的一个 unicode-range 属性引起了你的注意,这个属性的作用是规定不同的字符加载不同字符集文件。通俗讲我们会把一个字体分成多个字符集,然后按需加载。例如一个页面只有 500 个字,但是这 500 个字恰好都在一个字符集里面,那么其他的字符集就不需要加载,换句话说就不需要加载整个字体文件,因此节省了流量和优化了加载速度。

    使用该优化方式的上述链接中有:思源黑体(谷歌)、小米字体(小米)、鸿蒙字体(B 站)、华康金刚黑(字节跳动)

    字体文件格式

    本文一律使用 woff2 字体格式,在如今浏览器趋于 Chromium 内核的潮流下,作为个人站点可以不需要考虑旧版本浏览器的兼容性。若您想了解其他字体格式,推荐您查看 《知乎:关于字体格式》

    结语

    就 windows 上的清晰效果而言,无论你使用何种字体,都没有在 windows 经过特殊优化的微软雅黑更好。如今当你在 windows 安装苹方字体后,你会发现苹方字体的显示效果也十分漂亮,这是因为科技的进步使得显示器分辨率越来越清晰。所以就算使用没有在 Windows 经过特殊优化的字体,也会在 Windows 上大放异彩。

    0

    —— 评论区 ——

    昵称
    邮箱
    网址
    取消
    博主栏壁纸
    1,120 文章数
    11 标签数
    2,484 评论量
    舔狗日记