Font

與 Font 相關設定的通用類別,包含字寬、字形與字級。


Weight

font-weight

可設置元素或元件內文字的字寬,總共有九級可以使用,若字形本身沒有相對應字寬設計,則可能會沒有效果或是由系統模擬。使用類別名稱前綴詞為 .u-fw:

.u-fw:100
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deleniti, eos exercitationem fugiat quas reiciendis sapiente velit. Blanditiis consectetur culpa, dolorem harum iste minus neque odio optio quo velit, voluptatibus, voluptatum.
.u-fw:200
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deleniti, eos exercitationem fugiat quas reiciendis sapiente velit. Blanditiis consectetur culpa, dolorem harum iste minus neque odio optio quo velit, voluptatibus, voluptatum.
.u-fw:300
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deleniti, eos exercitationem fugiat quas reiciendis sapiente velit. Blanditiis consectetur culpa, dolorem harum iste minus neque odio optio quo velit, voluptatibus, voluptatum.
.u-fw:400
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deleniti, eos exercitationem fugiat quas reiciendis sapiente velit. Blanditiis consectetur culpa, dolorem harum iste minus neque odio optio quo velit, voluptatibus, voluptatum.
.u-fw:500
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deleniti, eos exercitationem fugiat quas reiciendis sapiente velit. Blanditiis consectetur culpa, dolorem harum iste minus neque odio optio quo velit, voluptatibus, voluptatum.
.u-fw:600
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deleniti, eos exercitationem fugiat quas reiciendis sapiente velit. Blanditiis consectetur culpa, dolorem harum iste minus neque odio optio quo velit, voluptatibus, voluptatum.
.u-fw:700
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deleniti, eos exercitationem fugiat quas reiciendis sapiente velit. Blanditiis consectetur culpa, dolorem harum iste minus neque odio optio quo velit, voluptatibus, voluptatum.
.u-fw:800
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deleniti, eos exercitationem fugiat quas reiciendis sapiente velit. Blanditiis consectetur culpa, dolorem harum iste minus neque odio optio quo velit, voluptatibus, voluptatum.
.u-fw:900
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deleniti, eos exercitationem fugiat quas reiciendis sapiente velit. Blanditiis consectetur culpa, dolorem harum iste minus neque odio optio quo velit, voluptatibus, voluptatum.

Family

可選擇不同類型字形,包含襯線、無襯線與等寬三種類型。使用類別名稱前綴詞為 .u-ff:

.u-ff:sans
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deleniti, eos exercitationem fugiat quas reiciendis sapiente velit. Blanditiis consectetur culpa, dolorem harum iste minus neque odio optio quo velit, voluptatibus, voluptatum.
.u-ff:serif
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deleniti, eos exercitationem fugiat quas reiciendis sapiente velit. Blanditiis consectetur culpa, dolorem harum iste minus neque odio optio quo velit, voluptatibus, voluptatum.
.u-ff:mono
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deleniti, eos exercitationem fugiat quas reiciendis sapiente velit. Blanditiis consectetur culpa, dolorem harum iste minus neque odio optio quo velit, voluptatibus, voluptatum.

Size

可選擇不同字級。使用類別名稱前綴詞為 .u-fs:

.u-fs:xs
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deleniti, eos exercitationem fugiat quas reiciendis sapiente velit. Blanditiis consectetur culpa, dolorem harum iste minus neque odio optio quo velit, voluptatibus, voluptatum.
.u-fs:sm
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deleniti, eos exercitationem fugiat quas reiciendis sapiente velit. Blanditiis consectetur culpa, dolorem harum iste minus neque odio optio quo velit, voluptatibus, voluptatum.
.u-fs:md
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deleniti, eos exercitationem fugiat quas reiciendis sapiente velit. Blanditiis consectetur culpa, dolorem harum iste minus neque odio optio quo velit, voluptatibus, voluptatum.
.u-fs:lg
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deleniti, eos exercitationem fugiat quas reiciendis sapiente velit. Blanditiis consectetur culpa, dolorem harum iste minus neque odio optio quo velit, voluptatibus, voluptatum.
.u-fs:xl
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deleniti, eos exercitationem fugiat quas reiciendis sapiente velit. Blanditiis consectetur culpa, dolorem harum iste minus neque odio optio quo velit, voluptatibus, voluptatum.