CSS字體和「顯示」

對我的生活中，我找不到文件，說明這個詞是什麼「顯示」確實在下面的CSS：CSS字體和「顯示」

h1 { 
    font: 3em 'Display' 
}

根據這篇文章關於CSS字體屬性

http://www.impressivewebs.com/css-font-shorthand-property-cheat-sheet/

大小和字體系列是強制性的或規則被忽略。

我認爲它必須是一個內置的字體系列或東西，但看這個箱子我創建：

http://jsbin.com/yuhaw/1/edit?html,css,output

HTML

<h1 class="test1">font: 3em 'Display' </h1> 
    <h1 class="test2">font: 3em</h1> 
    <h1 class="test3"> font-size: 3em;font-family: 'Display' </h1>

CSS

h1.test1 { 
    font: 3em 'Display' 
} 

h1.test2 { 
    font: 3em 
} 

h1.test3 { 
    font-size: 3em; 
    font-family: 'Display' 
}

如果是這種情況，我希望test1和test3看起來相同，但它們不相同。這裏發生了什麼？

來源

2014-06-24 Mike Cheel

在規則h1 { font: 3em 'Display' }中，'Display'部分指定字體系列名稱。這使得規則在語法上有效，而如果省略該規則，則該規則在語法上無效並被完全忽略。這裏並不重要，系統實際上是否有一個名爲Display的字體家族。它可能不會，然後瀏覽器使用一些後備字體，通常是其默認字體。

按照font shorthand的定義，此規則將所有字體屬性設置爲它們的初始值，除非在規則中爲它們提供了值。因此，font-size設置爲3em和font-family到Display，並將所有其他字體屬性設置爲CSS規範中指定的初始值。對於font-weight，初始值爲normal，因此該規則將覆蓋通用和推薦的瀏覽器默認設置，它將font-weight設置爲bold，對於h1。

如前所述，規則h1 { font: 3em }被忽略（按CSS規範和瀏覽器慣例），因此該元素以默認設置（粗體顯示，通常爲2em大小）顯示。

該規則h1.test3 { font-size: 3em; font-family: 'Display' }是有效的並且被應用，但它隻影響它設置的兩個特定字體屬性。這意味着font-weight是bold。

注意：繼承與此無關。這隻需要在元素，作者的樣式表和瀏覽器的默認樣式表中設置屬性。這裏的關鍵問題是速記屬性font的影響。

來源

2014-06-24 19:40:17

h1.test3是從瀏覽器繼承而來的，h1.test1是從css繼承的默認是不是？ –

@MikeCheel，不，CSS繼承不是那樣的。其中，元素在某些條件下繼承其父*的屬性。而且，例如'font-weight'永遠不會被繼承，除非由於明確的'font-weight：inherit'聲明。 –

你可以試試。例如。谷歌瀏覽器可幫助您使用該表示法查看計算出的樣式。

element.style { 
    font: 3em 'Display'; 
    font-family: Display; 
    font-size: 3em; 
    font-style: normal; 
    font-variant: normal; 
    font-weight: normal; 
    line-height: normal; 
}

按照documentation，你可以在一個聲明中，指定所有字體屬性使用以下符號：

來源

2014-06-24 16:17:51 Ioan

-1

有一個名爲「顯示」

您必須將OTF上傳到網絡服務器，並啓用這種方式沒有這樣的字體：

@font-face { 
    font-family: "Display"; 
    src: url("type/filename.eot"); 
    src: local("☺"), 
    url("type/filename.woff") format("woff"), 
    url("type/filename.otf") format("opentype"), 
    url("type/filename.svg#filename") format("svg"); 
    }

來源

2014-06-24 16:19:40 handheldblender

我覺得在一個共同的系統上沒有這樣的字體。我想他想使用這種字體：http://www.dafont.com/display-otf.font – handheldblender

爲什麼他們是不一樣的原因是因爲Test3你繼承了你沒有明確設置的所有屬性。每一種現有的風格都會保留下來，你只能改變尺寸和家庭。

因此，Test3是粗體，它是H1的瀏覽器默認樣式。

Test1是一個完整的字體聲明，並將每個未指定的屬性重置爲默認字體。這就是爲什麼Test1的字體權重爲normal。您可以通過指定「完整」字體聲明來覆蓋每個字體屬性，以便將大小和系列設置爲指定值，並將權重重置爲normal，這是字體的瀏覽器默認值。

在您的瀏覽器中（至少在Chrome中），您可以檢查Computed style。在這個意見中，你也可以檢查View inherited properties。如果你在小提琴中這樣做，你可以比較所有的字體屬性，你會注意到這些差異。

來源

2014-06-24 16:25:42 GolezTrol

我仍然感到困惑。無論如何，似乎默認值都是填充的。我錯過了什麼？此外，關於實際的'顯示'字體家族的任何信息？ –

確定後，通過一些更多的想法告訴我，如果這是正確的。使用字體規則時，如果省略，則使用規則的默認值。當在Test3中指定特定屬性時，將採用瀏覽器默認值（而不是規則默認值）。是對的嗎？ –

這是正確的。當在Test3中指定特定的屬性時，其他屬性的瀏覽器默認值（或任何應用的CSS）將保持不變*。 – GolezTrol

CSS字體和「顯示」

回答

相關問題