font-family(字體原理)
使用瀏覽器打開頁面時(shí)驶冒,瀏覽器會(huì)讀取 HTML 文件進(jìn)行解析渲染策州。當(dāng)讀到文字時(shí)會(huì)轉(zhuǎn)換成對應(yīng)的 unicode碼(可以認(rèn)為是世界上任意一種文字的特定編號)串述。再根據(jù)HTML 里設(shè)置的 font-family (如果沒設(shè)置則使用瀏覽器默認(rèn)設(shè)置)去查找電腦里(如果有自定義字體@font-face 酬姆,則加載對應(yīng)字體文件)對應(yīng)字體的字體文件芥玉。找到文件后根據(jù) unicode 碼去查找繪制外形发绢,找到后繪制到頁面上
在 CSS 中設(shè)置字體時(shí),直接寫字體中文或英文名稱瀏覽器都能識(shí)別匿值,直接寫中文的情況下編碼(GB2312赠制、UTF-8 等)不匹配時(shí)會(huì)產(chǎn)生亂碼。保險(xiǎn)的方式是將字體名稱用Unicode來表示
宋體 | SimSun | \5B8B\4F53 黑體 | SimHei | \9ED1\4F53 微軟雅黑 | Microsoft YaHei | \5FAE\8F6F\96C5\9ED1-
查詢unicode編碼:打開控制臺(tái) escape('微軟雅黑')挟憔,把 %u替換成 \
字體圖標(biāo)的實(shí)現(xiàn)原理
chrome最小字體解決方案
文本
- text-align:文本對其方式 left钟些、center、right绊谭、justify
- text-indent:文案第一行縮進(jìn)距離
- text-decoration: none厘唾、underline、line-through龙誊、overline
- color:文字顏色
- text-transform:改變文字大小寫none抚垃、uppercase、lowercase、capitalize
- word-spacing:可以改變字(單詞)之間的標(biāo)準(zhǔn)間隔
- letter-spacing:字母間隔修改的是字符或字母之間的間隔