定義CSS @字體臉部粗體斜體

我正在一個項目中使用我正在使用的六種體重/樣式的字體。這些包括：常規，斜體，半粗體，半粗體斜體，粗體和粗體斜體。我有@ font-face標籤設置（理論上）他們應該顯示的方式。但實際情況是，大膽的總是斜體。無論如何要宣佈這些大膽的+斜體權重，以便它們能夠正常工作？我不想在所有地方調用不同的字體名稱。理想情況下，我應該能夠聲明正確的體重和樣式，並獲得正確的字體版本。定義CSS @字體臉部粗體斜體

@font-face { 
    font-family: 'AdobeGaramondPro'; 
    src: url('agaramondpro-bold-webfont.eot'); 
    src: url('agaramondpro-bold-webfont.eot?#iefix') format('embedded-opentype'), 
     url('agaramondpro-bold-webfont.woff') format('woff'), 
     url('agaramondpro-bold-webfont.ttf') format('truetype'); 
    font-weight: bold; 
    font-style: normal; 
    } 

    @font-face { 
    font-family: 'AdobeGaramondPro'; 
    src: url('agaramondpro-bolditalic-webfont.eot'); 
    src: url('agaramondpro-bolditalic-webfont.eot?#iefix') format('embedded-opentype'), 
     url('agaramondpro-bolditalic-webfont.woff') format('woff'), 
     url('agaramondpro-bolditalic-webfont.ttf') format('truetype'); 
    font-weight: bold; 
    font-style: italic, oblique; 
    } 

    @font-face { 
    font-family: 'AdobeGaramondPro'; 
    src: url('agaramondpro-italic-webfont.eot'); 
    src: url('agaramondpro-italic-webfont.eot?#iefix') format('embedded-opentype'), 
     url('agaramondpro-italic-webfont.woff') format('woff'), 
     url('agaramondpro-italic-webfont.ttf') format('truetype'); 
    font-weight: normal; 
    font-style: italic, oblique; 
    } 

    @font-face { 
    font-family: 'AdobeGaramondPro'; 
    src: url('agaramondpro-regular-webfont.eot'); 
    src: url('agaramondpro-regular-webfont.eot?#iefix') format('embedded-opentype'), 
     url('agaramondpro-regular-webfont.woff') format('woff'), 
     url('agaramondpro-regular-webfont.ttf') format('truetype'); 
    font-weight: normal; 
    font-style: normal; 
    } 

    @font-face { 
    font-family: 'AdobeGaramondPro'; 
    src: url('agaramondpro-semibold-webfont.eot'); 
    src: url('agaramondpro-semibold-webfont.eot?#iefix') format('embedded-opentype'), 
     url('agaramondpro-semibold-webfont.woff') format('woff'), 
     url('agaramondpro-semibold-webfont.ttf') format('truetype'); 
    font-weight: 600; 
    font-style: normal; 
    } 

    @font-face { 
    font-family: 'AdobeGaramondPro'; 
    src: url('agaramondpro-semibolditalic-webfont.eot'); 
    src: url('agaramondpro-semibolditalic-webfont.eot?#iefix') format('embedded-opentype'), 
     url('agaramondpro-semibolditalic-webfont.woff') format('woff'), 
     url('agaramondpro-semibolditalic-webfont.ttf') format('truetype'); 
    font-weight: 600; 
    font-style: italic, oblique; 
    }

任何想法，使其工作？

來源

2012-05-15 user1296965

你可以使用像這樣p.normal {font-style:normal} p.italic {font-style:italic} p.oblique {font-style:oblique}這樣的東西來聲明與paragraf類的字體。或者類似於h1, h2, h3, h4, h5, #headline a { color:#FF9900; }

來源

2012-05-15 21:22:25

這可能不是您正在尋找的技術答案，但您爲什麼需要使用三個權重（reg，semi和bold，現在不用斜體）？

您可能會發現這些權重之間的對比度不足以保證在一頁內使用全部三個權重。您希望使用不同的字體權重來在佈局中創建不同層次的層次結構;兩個權重，結合尺寸，大小和顏色的變化應該足夠了。

具有各種權重的字體可能包括這些字體：細線;瘦;光;定期;中; Semibold;膽大;黑色;重（每個都有斜體版本）。該頻譜的極端不應用於設置長文本塊，但只能用於大型顯示屏或頂級標題。然後，您會在主體文本的Light和Bold位置之間選擇兩個權重，在大多數情況下，選擇至少兩個位置（輕和中，或常規和粗體）的權重以獲得足夠的對比度。太多的對比會對身臨其境的閱讀產生干擾;例如，不要將Light與Bold配對。

如果您需要額外的中間重量用於特殊用途（例如，您可能在黑色背景下設置白色文本，因此半粗體將會很好），那麼您可以爲該偶然性創建一個單獨的類使用樣式，正常情況下將font-family聲明中的四個常規權重和斜體連接起來。

來源

2012-05-16 09:20:20 Anthony

其實安東尼，那不是我正在尋找的答案，但它是正確的。在回顧我的photoshop模型時，只有semibold和正常和正常的斜體被使用，所以這個問題已經變得沒有實際意義。我仍然好奇是否有辦法讓所有6種風格都能正常工作。附：它似乎在Safari中正常工作，但不在Chrome中。非常適合共享WebKit引擎。 – user1296965

我弄明白了，你必須按照這個順序列出它們：正常的，正常的斜體，半粗體，半粗體斜體，粗體，粗體斜體。如果你首先設置斜體，那我想在繼承過程中勝出。 – user1296965

我可能是錯的，但我似乎記得閱讀，爲此與IE8一起工作，你必須在任何地方調用字體名稱（這是你不想做的）。因此，在每個字體聲明中，你必須聲明「font-style：normal」，也適用於。這是超級討厭的，就好像字體不管用什麼原因，即使是粗體和斜體也能得到「正常」風格的系統字體。對不起，我不記得我讀過哪裏了！

來源

2013-08-02 15:52:37 user1010892

定義CSS @字體臉部粗體斜體

回答

相關問題