關於前端開發一些css的技巧
阿新 • • 發佈：2018-12-13
文字屬性連寫：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> p { font-size: 16px; font-weight: bold; font-family: 微軟雅黑; font-style: italic; line-height: 40px; } </style> </head> <body> <p>文字屬性連寫</p> <p>文字屬性連寫</p> </body> </html> 在瀏覽器中顯示為：
將style的p修改為
p { font: italic 700 16px/40px 微軟雅黑 }瀏覽器效果和上邊是一致的：
可能你會有所困惑，一定字型風格在前，然後接著寫字型粗細、字型大小、行高、那種字型麼？
我在這建議採用這種，語法： font: font-style font-weight font-size/line-height font-family;
可不需要行高： font: font-style font-weight font-size font-family;
裡面文字大小和字型為必寫；只寫一個字型大小，font： 16px;是不被執行，直接寫font-size： 16px;即可。
當然你開啟搜狐主頁，會發現人家的字型寫成如下圖：
一個unicode編碼，因為你寫成中文還是得轉化為unicode編碼，再被瀏覽器引擎解析，直接寫成unicode編碼省去轉換過程，是為提高網頁效能。
當然你要寫宋體、微軟雅黑等字型的unicode編碼值會發現記憶很麻煩，在這我教一個簡單的小技巧。
第一步：開啟瀏覽器，按住F12；
第二步：開啟Console介面；
第三步：輸入 ‘ escape("宋體") ’；
第四步：將%u改成 ’ \ ‘ 即可；
這便是宋體的unicode編碼 ‘ \5B8B\4F53 ’ 歡迎大家一起學習，一起學習和分享使我快樂！ 前端開發-Sky