2014-01-12 36 views
13

用於CSS屬性名稱的術語'text'和'font'之間的區別是什麼?他們的意思是相同的,還是在以font-開頭的一個CSS屬性名稱和一個以text-開頭的CSS屬性名稱之間存在語義差異?CSS屬性名稱中的'font-'vs'text-'

例如,爲什麼我們有這些CSS屬性:

font-size: 34px; 
text-decoration: underline; 

而不是將它們命名爲這樣嗎?

font-size: 34px; 
font-decoration: underline; 

還是這樣?

text-size: 34px; 
text-decoration: underline; 

是否有font-text-正在這裏使用的方式語義差別,或者是前綴的選擇完全是任意的?

回答

14

至於我的理解去一下:

文字:你有選擇的(或默認)字體繪製的字符。

字體:字符的形狀。

您可以使用特定字體爲下劃線繪製文本,但不能爲字體本身加下劃線,因爲它是綁定到字符的形狀的集合。不過,您可以調整這些形狀的大小,以便使用該字體繪製的文本更大。 (因此,font-size

這也是爲什麼您有font-style: italic而不是text-style: italic,因爲實際形狀在您使用斜體時會發生變化。 font-weight vs text-weight也一樣。

希望這有助於:)

編輯:

如果你看一下開始text-的屬性和那些開始font-你可以看到一個明顯的區別:

text-align 
text-decoration 
text-indent 
text-justify 
text-outline 
text-overflow 
text-shadow 
text-transform 
text-wrap 

都使用用於對已經繪製的文本進行定位或視覺更改。

font 
font-family 
font-size 
font-style 
font-variant 
font-weight 
@font-face 
font-size-adjust 
font-stretch 

全部用於字符顯示在屏幕上的方式。

+0

謝謝你的主席! – Tijme

1

CSS屬性名稱的部分沒有意義,整個屬性名稱只有在CSS規範(或草稿)中分配給它的含義。通常,這些名稱在被解釋爲英文單詞時暗示其含義,但名稱而不是定義了含義,並且一些名稱完全是誤導性的。 (例如,即使在不涉及空白字符的上下文中,white-space也會影響分割成行)。

所以名稱只是標識符,但可能會有一些分配名稱的系統。實際上,以font-開頭的屬性名稱與用於呈現字符的字體的選擇或使用字體的特定方式有關。以text-開頭的屬性名稱與格式化文本(字符)的其他方面有關。

這個劃分相對比較清晰,但它依賴於技術:由於字體技術的工作方式,某些不是字體技術的工作方式,某些格式化功能與字體相關。

劃分反映在CSS3「模塊」分裂:字體相關的特徵在CSS Fonts Module Level 3(定義與font開頭的名稱屬性)定義的,而其他文本格式的特徵在CSS Text Module Level 3大多定義(其定義了一些屬性名稱以text-開頭,但也包含其他屬性)。

1

縱觀上MDN's CSS Reference上市font-特性,它在我看來,首先是font-屬性影響,或至少影響潛力,選擇哪種字體從FONT-FAMILY內使用畫一個特定的角色。以text-開頭的屬性從來不會這樣做,但可以做各種其他的東西,包括後期渲染以添加獨立於字形選擇的陰影之類的文本效果。

例如...

  • font-family - 提供字體系列可供選擇的,用於呈現每個字符的字體列表;顯然,這會影響字形選擇。
  • font-weight - 在可能的情況下,通過從font-family中選擇適當的粗體字體,以正確的粗細程度顯示文本。
  • font-size - 可能會明顯影響所選的實際字體,因爲並非所有的字體格式都是可任意縮放的。這是通過從font-family docs(重點煤礦)以下報價佐證:

    當字體是隻在某些款式可選,變體,或尺寸,這些屬性也可能影響其字體系列選擇。

    (雖然我猜這主要是一個歷史問題,因爲我不認爲今天不可伸縮的字體格式仍然在使用。)

  • font-size-adjust - 就像上面。

  • font-stretch - 引用文檔:

    此屬性不被拉伸或收縮其更改爲任意字體的幾何形狀。像font-feature-settings或font-variant一樣,只是選擇最合適的字體,如果這個字體提供幾個字體的話,這只是一個意思。

...等等。不是所有這些屬性總是影響字體選擇;例如,font-size顯然是關於字形呈現,而不是字體選擇,在可縮放字體的情況下,並且和font-style屬性可能導致瀏覽器合成粗體或斜體字形​​而不是使用粗體或斜體字體,如noted by W3

儘管印刷工不太喜歡這種做法,但大膽的面孔通常是由用戶代理合成的,用於缺乏實際大膽面孔的面孔。

font-性質有共同的東西,不過,是他們可以潛在影響字體和字形選擇屬性。因此,何時使用font-text-前綴的選擇似乎不是任意的。