標籤：屬性 文本 body 效果 variant utf-8 樣本 使用者 20px
font-style可以用來設定文字的斜體- 可選值：
- 大部分瀏覽器都不會對傾斜和斜體做區分，也就是說我們設定italic和oblique它們的效果往往是一樣的
- 一般我們只會使用italic
可選值：
該樣式也可以指定100-900之間的9個值，
但是由於使用者的電腦往往沒有這麼多層級的字型，所以達到我們想要的效果
也就是200有可能比100粗，300有可能比200粗，但是也可能是一樣的
font-variant可以用來設定小型大寫字母
可選值：
小型大寫字母：
將所有的字母都以大寫形式顯示，但是小寫字母的大寫，
要比大寫字母的大小小一些。
在CSS中還為我們提供了一個樣式叫font，使用該樣式可以同時設定字型相關的所有樣式,可以將字型的樣式的值，統一寫在font樣式中，不同的值之間使用空格隔開
使用font設定字型樣式時，斜體 加粗 小大字母，沒有順序要求，甚至可寫可不寫，如果不寫則使用預設值，但是要求文字的大小和字型必須寫，而且字型必須是最後一個樣式，大小必須是倒數第二個樣式
實際上使用簡寫屬性也會有一個比較好的效能
第一個樣本：利用font設定字型相關的所有樣式。
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> p{ color: red; font: small-caps bold italic 20px "微軟雅黑"; } </style> </head> <body> <p> 日出而作，日入而息。 鑿井而飲，耕田而食。 帝力於我何有哉！ABC abc </p> </body></html>
看下效果：
第二個樣本：
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> .p1{ color: red; /*設定一個文字大小*/ font-size: 55px; /*設定一個字型*/ font-family: "agency fb"; /*設定文字斜體*/ font-style: italic; /*設定文字的加粗*/ font-weight: bold; /*設定一個小型大寫字母*/ font-variant: small-caps; } </style> </head> <body> <p class="p1">日出而作，日入而息。 鑿井而飲，耕田而食。 帝力於我何有哉！ABC abc</p> </body></html>
看下效果：
前端學習 -- Css -- 字型的幾個屬性學習
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
