miui12字体第三方（MIUI13全新系统字体使用方法）

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

font-weight - CSS（层叠样式表） | MDN

font-weight —— CSS 属性指定了字体的字重（粗细程度）。font-weight 属性可以是一个 100~900 的数值，也可以是一个normal、bold、bolder、lighter … 名称。

100 到 900 之间的数值大致对应如下的常见粗细值名称：

• 100 Thin (Hairline)
• 200 Extra Light (Ultra Light)
• 300 Light
• 400 Normal
• 500 Medium
• 600 Semi Bold (Demi Bold)
• 700 Bold
• 800 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: <YourWebFontName>; src: <source> [<format>][ <source> [<format>]]*; [font-weight: <weight>]; [font-style: <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” 经常作为单词的前缀，它们都是“一半”的意思。

当说字重时，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