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.