MiSans MIUI13全新系统字体使用方法

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

Tailwind CSS 字体 font-weight

如何引入不同字重的字体？

一些字体只提供 normal 和 bold 两种值。此时，指定粗细值为 100-500 时，实际渲染时将使用 normal，指定粗细值为 600-900 时，实际渲染时将使用 bold 。

因为有个小网页莱卡水印生成器 by 码中人需要用到小米的MiSans字体。

MIUI 13 采用全新系统字体 MiSans

笔型平直有力，设计更加简约，减少视觉负担，更有利于屏幕显示。共包含29,093个字符，支持多种语言。MiSans 提供了多种 OpenType 功能，可根据特定需求来选择不同形态的字符，例如某些标点符号可以根据周围字母的形态自动调整至合适的位置。MiSans字重齐全，层级清晰，10个字重全部开放下载，供全社会免费商用。

下载链接：MiSans字体下载

小米 MiSans字体

引入字体的语法如下：

1
2
3
4
5
6


@font-face {
    font-family: <YourWebFontName>;
    src: <source> [<format>][,<source> [<format>]]*;        
    [font-weight: <weight>];        
    [font-style: <style>];      
}

所以引用MiSans不同字重字体 css 代码如下：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57


@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