iT邦幫忙

第 12 屆 iThome 鐵人賽

DAY 5
8
Modern Web

金魚都能懂的CSS必學屬性系列 第 5

Font-style - 金魚都能懂的CSS必學屬性

  • 分享至 

  • xImage
  •  

Font-style 的規則

font-style基本上僅需指定一個值,其撰寫方式像是這樣

font-style: italic;

font-style的作用是設定文字的斜體(italic)或斜角(oblique),其中設定的值主要是以關鍵字為主,多數使用者可能比較常用到的會是像「italic」這樣的值,但使用關鍵字還是有些微的差異的,我們先來看看關鍵字的值有哪些

  • normal (一般)
  • Italic (斜體)
  • oblique (斜角字)
  • inherit (繼承)
  • initial (初始)
  • unset (未設定或不設定)

italic 與 oblique 傻傻分不清楚

italic 與 oblique中,我想多數人可能只知道italic而不知道oblique,我所說的多數人,是那些對字型沒有研究的人(包含我XD),italic指的是斜體字,或稱之為「仿斜體」字,其實有些字型會特別設計斜體字,但有些字型則不會,當文字沒有特別設計斜體字的時候,使用CSS對其設定font-style: italic;,則瀏覽器就會幫你將文字轉成具備一定斜度的視覺外觀。通常這樣的設定可以讓斜體文字跟一般正常文字有這更加明顯的差異。對閱讀的差異性來說,會有更佳的對比效果。而斜角字(oblique)則是羅馬字中的一種,其本身在設計時期就有傾斜角度,可謂是真正的斜體字,但目前在網頁上,其實不管你設定italic或oblique,在大多數的字型中呈現都差不多。

對於italic與oblique的差異,有興趣的朋友可以參考這篇「Fake vs. True Italics」文章,應該可以看出更清楚的差別。不過看了許多資料發現,對於這兩個值的設定效果依舊尚未有可測試出來的差異,若有網友願意分享經驗的話,歡迎在下方留言,感謝。

我們也可以從一些軟體中的名稱一窺所謂的「仿斜體」的端倪,許多軟體內都有「仿斜體」的功能,像是word、photoshop...等,而word中的中英文則是「Italicize your text / 將文字變更為斜體」,Amos電腦中Photoshop中的原文則是「Faux Italic(假斜體)」

word 中的斜體功能,圖示是一個大寫斜「I」
https://ithelp.ithome.com.tw/upload/images/20200920/20112550PMuTDSs08f.png
Photoshop中的文字仿斜體功能,圖示是一個大寫斜「T」
https://ithelp.ithome.com.tw/upload/images/20200920/20112550DPXkKy8xyz.png

最後....我就是那個看了半天還傻傻感到依舊混亂的人(無誤)...別裝了!你也是對吧(硬要拖下水)


「金魚都能懂的CSS選取器」已集結成書,並於書中添加一些新篇章及細節補充,有興趣的朋友可至天瓏書局選購,感謝各位支持
購書連結 https://www.tenlong.com.tw/products/9789864344994?list_name=b-r30-zh_tw
https://ithelp.ithome.com.tw/upload/images/20200917/20112550bxAFk2frMp.jpg
讓我們好好善用CSS選取器吧


金魚都能懂的教學系列

鐵人雙主題挑戰中,歡迎訂閱一波

金魚都能懂的Bootstrap5網頁框架開發

立刻訂閱 CSS可樂的網站/頻道享受精彩文章

Line搜尋「@CSScoke」加入CSS可樂公開帳號,可以收到 Amos 第一手資訊喔
CSS 可樂部落格
CSS coke 的 Youtube 直播頻道
快按此訂閱 CSS coke 的頻道接收最新教學
/images/emoticon/emoticon12.gif


上一篇
Font-weight - 金魚都能懂的CSS必學屬性
下一篇
Text-decoration - 金魚都能懂的CSS必學屬性
系列文
金魚都能懂的CSS必學屬性31
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言