文本屬性是什么
文本屬性用于控制一段文本的外觀。
文本屬性列表
| 屬性 | 描述 |
|---|---|
| text-align | 規(guī)定文本的水平對齊方式 |
| text-decoration | 規(guī)定文本裝飾 |
| text-shadow | 添加文本陰影 |
| text-indent | 規(guī)定文本塊（text-block）中的的首行縮進 |
| text-transform | 控制文本大小寫 |
| word-spacing屬性 | 文本之間的空白散休。 |
| letter-spacing屬性 | 控制字符之間的間距 |
| text-overflow屬性 | 文本溢出隱藏 |
text-align屬性
定義
定義文本的水平對齊方式馏予。（不能控制垂直）
語法
container{
text-align:參考屬性值;
}
text-align: left | center | right | justify
}</pre>
屬性值 left : 規(guī)定文本左對齊。默認值 center: 規(guī)定文本水平居中對齊深纲。 right: 規(guī)定文本右對齊仲锄。 justify: 規(guī)定文本兩端對齊。
text-decoration屬性
定義 定義文本修飾線湃鹊。
語法
.container{
text-decoration:參考屬性值;
}
屬性值
overline: 添加上劃線
line-through : 添加刪除線
underline: 添加下劃線
none: 取消修飾線儒喊。默認值
text-shadow屬性
定義 定義文本陰影。
語法
.container{
text-shadow:參考屬性值;
}
屬性值
x-offset: 設置水平偏移币呵。單位是像素怀愧。正直向右，負值向左余赢。
y-offset：設置垂直偏移芯义。單位是像素。正值向下妻柒，負值向上扛拨。
blur： 設置模糊半徑。數值越大越模糊举塔。
color：設置陰影的顏色绑警。
text-indent屬性
定義 定義文本縮進。
語法
.container{
text-indent:參考屬性值;
}
屬性值
-
相對值：
em: em表示一個字符央渣，使用字符設置文本縮進待秃。縮進2個字符痹屹，就是2em章郁。 推薦
rem
%
vh/vw
-
絕對值
- px：使用像素設置文本縮進。不推薦。
text-transform屬性
定義 定義英文字母的小寫轉換暖庄。
語法
.container{
text-transform:參考屬性值;
}
屬性值
none : 默認值聊替。對原字母不進行轉換。
capitalize：文本中的每個單詞以大寫字母開頭培廓。(轉成大寫字母開頭）
uppercase: 定義僅有大寫字母惹悄。（全部轉成大寫字母）
lowercase: 定義無大寫字母，僅有小寫字母肩钠。（全部轉成小寫字母）
字體屬性
字體屬性是一個設置字體的樣式
字體屬性列表
| 屬性 | 描述 |
|---|---|
| font-family屬性 | 指定元素的字體名稱或字體家族名稱泣港。 |
| font-size屬性 | 設置頁面字體的大小。 |
| font-weight屬性 | 定義頁面字體的粗細价匠。字體的粗細共有9個級別当纱。從100 - 900 |
| line-height屬性 | 設置字體行高。 |
| font-style屬性 | 用于定義字體風格踩窖。風格指字體是否傾斜坡氯。 |
| font-variant屬性 | 定義小型大寫字母。 |
| font復合屬性 | font復合屬性用于把多個字體屬性寫在一個聲明里洋腮。 |
| @font-face規(guī)則 | 它允許網頁開發(fā)者為其網頁指定在線字體 |
@font-face
定義：
用戶定義元素的自定義字體
什么是自定義字體箫柳？
自定義字體是非系統(tǒng)字體。也是非安全字體
創(chuàng)建自定義字體
1.確定路徑：把自定義字體文件復制到項目項目下
1.2確定文件位置：引用在線字體啥供。在線字體使用絕對地址來引用字體文件
2.添加：使用@font-face規(guī)則把自定義字體文件添加到本地字庫系統(tǒng)中
3.引用：使用font-family引入自定義字體悯恍。
什么是安全字體？
安全字體就是系統(tǒng)字體
系統(tǒng)字體就是安全字體
設置font-family首選安全字體
自從@font-face規(guī)則出現后我們可以在頁面引入非安全字體
語法
@font-face{/*大括號：設置引入自定義字體規(guī)則*/
/*font-family 是規(guī)則符伙狐，不是屬性涮毫。用于描述向系統(tǒng)字體列表中添加新字體的名稱*/
font-family:'自定義字體名稱'；
/*url：是指定自定義文件的路徑(相對路勁/絕對路勁)*/
url('自定義字體文件'.otf);
}
body{
font-family：'serif';
}
/*第二步：向元素應用自定義字體*/
#logo h2{
font-family:;
}
}
6.自定義字體免費字庫
英文字庫：谷歌字庫
