MIUI13全新系统字体使用方法(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

MIUI13全新系统字体使用方法(MIUI13全新系统字体使用方法)(1)

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

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

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

MIUI 13 采用全新系统字体 MiSans

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

下载链接:MiSans字体下载

MIUI13全新系统字体使用方法(MIUI13全新系统字体使用方法)(2)

引入字体的语法如下:

@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
,

免责声明:本文仅代表文章作者的个人观点,与本站无关。其原创性、真实性以及文中陈述文字和内容未经本站证实,对本文以及其中全部或者部分内容文字的真实性、完整性和原创性本站不作任何保证或承诺,请读者仅作参考,并自行核实相关内容。文章投诉邮箱:anhduc.ph@yahoo.com

    分享
    投诉
    首页