ont 屬性可以用來作為 font-style, font-variant, font-weight, font-size, line-height 和 font-family 屬性的簡寫,或將元素的字體設置為系統字體。
font-family寫法示例:
<style>
p{
font-family: "幼圓";
}
</style>
</head>
<body>
<p>19級啟嘉班</p>
</body>
效果:
技術等級】中級
本文重點講解CSS文件中的字符集問題,同時展示了中文字體的英文名稱應該如何使用。本文屬于前端開發的中級教程,適合于有一定的CSS開發經驗的學習者。
現在頁面的CSS代碼多采用CSS文件的方式鏈接使用,這主要是秉承了“標記”與“表象”相分離的設計原則,讓CSS代碼在一個獨立的文件中呈現。
在CSS文件中同樣會出現一定的中文,例如:中文注釋,中文字體名稱。這些中文內容,瀏覽器能夠自動識別而不至于解釋為亂碼嗎?
W3C為CSS文件準備了一個設置文件字符集的命令,該命令的書寫格式如下:
CSS文件使用 @charset “utf-8”; 命令設置文件字符集
該句命令的使用有如下的規定:
上述代碼中@和charset之間不得有空格。
所指定的字符集名稱必須用雙引號引住。
命令末尾必須帶有一個分號。
該句命令在一個CSS文件中只允許出現一次。
該句命令必須書寫在CSS文件的第一行,前面不得有任何內容,也不得有任何注釋。
該句是為CSS文件中出現的非ASCII碼字符所設定的。為了讓非ASCII字符不出現亂碼或者字體中文名稱起作用,必須設置該句。當然現在的許多編輯器在這方面處理的都比較好,設計人員無需書寫該句,也能正確的實現非ASCII字符。
一、Sublime 中如何修改CSS字符集:
在編輯器Sublime 3中,如果要修改字符集,單純的在 @charset 命令中改變字符集的名稱是不行的。
首先,默認情況下,Sublime 3認定的字符集為 utf-8,從下圖中指定的位置可以看出。
Sublime 3 中指定文件當前字符集的位置
圖中箭頭指向的位置表明當前的字符集設置為“utf-8”,圖中第1句指定的字符集命令也是“utf-8”。這樣,代碼第4行的中文字體名稱“漢儀綜藝體簡”就可以在頁面中生效了。
如果想使用“gb2312”或者“big5碼”字符集,則需要更改Sublime 3中指定的字符集。方法是在“文件”菜單下選擇“設置文件編碼”命令,從中找到想使用字符集,例如“GBK”,就表示“gb2312”字符集。
Sublime 3 中更改文件編碼
如果沒有對Sublime 3進行文件編碼設置,只是更改了 @charset 命令中指定的字符集名,則在代碼中使用的中文字體名稱是不會生效的。
箭頭指定的兩個位置必須是一致的
二、中文字體的英文名稱表示法:
如果能讓中文字體的名稱不再使用中文書寫,而是使用英文書寫,那么CSS文件中幾乎就很少再會有非ASCII字符的出現了。所以,每一個中文字體都具備一個英文名稱表示法。大家應該熟悉一些常用字體的英文名稱表示法,這樣就不用在CSS文件頂部注明 @charset 命令了。
下面,小海老師就為大家搜集了一些常用中文字體的英文表示法,希望大家在學習過程中注意知識的積累。
宋體:SimSun
仿宋:FangSong
黑體:SimHei
楷體:KaiTi
幼圓:YouYuan
隸書:LiSu
微軟雅黑:Microsoft YaHei
華文細黑:STXihei
華文中宋:STZhongsong
華文仿宋:STFangsong
花紋新魏:STXinwei
華文行楷:STXingkai
華文彩云:STCaiyun
華文隸書:STLiti
如果您的電腦是 Apple Mac OS,還可能會用到下列字體:
麗宋Pro:LiSong Pro Light
麗黑Pro:LiHei Pro Medium
蘋果麗中黑:Apple LiGothic Medium
蘋果麗細宋:Apple LiSung Light
標楷體:BiauKai
將上述中文字體的英文名稱用在 font-family 屬性中指定字體,就可以不用在書寫 @charset 命令了。
下一次小海老師會為大家講解CSS中有關文本段落的屬性,結合前面HTML的內容,可以對頁面中的段落進行更為細致的調整。千萬不要錯過哦。
如果大家希望得到更加全面的關于HTML和CSS技術講解的內容,可以私信我,我會免費將小海老師自己編寫的HTML和CSS的PDF教材發給你,幫助你在前端開發的道路上闊步前行。
好,我是PPT模板專家——小皮老師。
我已經在頭條累計分享——超過1500套漂亮的PPT模板,有需要PPT模板,找我就對了!
私信回復:下載。點擊我的頭像,即可看到“私信”的按鈕。
前面幾期,我們分享了針對PPT新手的幾篇文章。
PPT新手掌握這5個技巧!做PPT簡直有如神助,附工具下載
PPT新手最常見3大錯誤!現在看還能挽救一下
PPT新手常犯這7個錯誤,你有嗎?附對比圖
還沒看過的小伙伴們可以點擊鏈接查看!
那么,今天小皮老師跟大家分享的是中國風字體。
你看,近些年來,越來越多國潮崛起了!比如說故宮和百雀羚等等。
故宮潮品
百雀羚廣告
中國風的設計也越來越受到關注!將中國風字體運用到設計當中,不僅可以增加設計的文化韻味,還可以提現出咱們民族的設計性。
今天,小皮老師就給大家推薦一波非常好看的中國風字體,從上百款中國風字體里面挑選出來的,真的太美了。
希望大家能夠喜歡,記得點贊關注評論一波哦~感謝大家!
話不多說,開始介紹:
一款帶有古典氣息的漢儀字體,外形和手書體有點像,線條張揚肆意,富有動勢
這是方正字體庫的經典簡體字體,這款字體字形非常美觀,字體端正
大書法家王羲之的一款中文字體,王羲之的字非常好看,具有筆力雄勁,入木三分的特點
一款非常好用的方正字體,字體棱角分明,非常的霸氣和美觀,外加上楷體,看著非常的舒服
是一款很有個性的中文字體,字體輸寫高低不一,很有設計感
一款非常漂亮的毛筆書法字體,這款字體極具力量卻不失美感的字體形式
一款非常獨特的字體,第一眼看上去就非常的大氣美觀,筆畫看上去非常的連貫流暢
字體筆鋒犀利,熱情奔放,非常好看。
融合了楷體、行書的新型字體,字形十分優美,筆鋒細膩
一款出自蘇新詩之手的碑帖字體
10款最美中國風字體,更新完畢!喜歡嗎?
希望越來越多的朋友,都能夠關注中文字體的設計!咱們一起為為中國文化的全新探索一起努力!
再次感謝這些優秀的字體設計師和字體設計公司
注:字體如果要商用,請購買版權哦。
OK,以上就是今天我們分享的內容了!
私信回復關鍵詞:字體! 即可獲得上面10款字體的打包下載的地址。
覺得有點收獲的話,可以幫小皮老師,點贊,評論轉發一下!
歡迎大家留言評論。
*請認真填寫需求信息,我們會在24小時內與您取得聯系。