MiSansMIUI13全新系统字体使用方法 _MiSansMIUI13全新系统字体使用方

font-weight - CSS（层叠样式表） | MDNfont-weight —— CSS 属性指定了字体的字重（粗细程度）。font-weight 属性可以是一个 100~900 的数值，也可以是一个normal、bold、bolder、lighter … 名称。
100 到 900 之间的数值大致对应如下的常见粗细值名称：
100 Thin (Hairline)200 Extra Light (Ultra Light)300 Light400 Normal500 Medium600 Semi Bold (Demi Bold)700 Bold800 Extra Bold (Ultra Bold)900 Black (Heavy)以下是 Tailwind CSS 字体粗细值名称和数值对应表：
Font Weight - Tailwind CSS

文章插图
如何引入不同字重的字体？一些字体只提供 normal 和 bold 两种值。此时，指定粗细值为 100-500 时，实际渲染时将使用 normal，指定粗细值为 600-900 时，实际渲染时将使用 bold。
因为有个小网页莱卡水印生成器 by 码中人需要用到小米的MiSans字体。
MIUI 13 采用全新系统字体 MiSans笔型平直有力，设计更加简约，减少视觉负担，更有利于屏幕显示。共包含29,093个字符，支持多种语言。MiSans 提供了多种 OpenType 功能，可根据特定需求来选择不同形态的字符，例如某些标点符号可以根据周围字母的形态自动调整至合适的位置。MiSans字重齐全，层级清晰， 10个字重全部开放下载，供全社会免费商用。
下载链接：MiSans字体下载

文章插图
引入字体的语法如下：
@font-face {font-family: ;src:[][, []]*;[font-weight: ];[font-style: ];}所以引用MiSans不同字重字体 css 代码如下：
@font-face {font-family: "MiSans";font-weight: 400;src: url("./fonts/MiSans-Normal.ttf");}@font-face {font-family: "MiSans";font-weight: 100;src: url("./fonts/MiSans-Thin.ttf");}@font-face {font-family: "MiSans";font-weight: 200;src: url("./fonts/MiSans-ExtraLight.ttf");}@font-face {font-family: "MiSans";src: url("./fonts/MiSans-Light.ttf");font-weight: 300;}@font-face {font-family: "MiSans";src: url("./fonts/MiSans-Medium.ttf");font-weight: 500;}@font-face {font-family: "MiSans";src: url("./fonts/MiSans-Demibold.ttf");font-weight: 600;}@font-face {font-family: "MiSans";src: url("./fonts/MiSans-Semibold.ttf");font-weight: 700;}@font-face {font-family: "MiSans";src: url("./fonts/MiSans-Bold.ttf");font-weight: 800;}@font-face {font-family: "MiSans";src: url("./fonts/MiSans-Heavy.ttf");font-weight: 900;}body{font-family: MiSans;}Semi Vs Demi“semi” 和 “demi” 经常作为单词的前缀，它们都是“一半”的意思。
【MiSansMIUI13全新系统字体使用方法】当说字重时，Semi Bold 等效于 Demi Bold，而小米的 MiSans 字体两种字重都有，其中 Semi Bold 比 Demi Bold 要重一点。缺了一个 Extra Bold，命名不走寻常路，请大家注意。
参考资料[Difference Between Semi and Demi | Difference Between](http://www.differencebetween.net/language/words-language/difference-between-semi-and-demi/)Semi-, hemi-, demi- 英語之家 - The Home of English[Semi-Permanent vs. Demi-Permanent Hair Color](https://www.esalon.com/hair-color-mastery/colorist-tips/semi-permanent-vs-demi-permanent)@font-face - CSS（层叠样式表） | MDN