如何定義每種字體風格獨立的字體 - 我CSS

有一個HTML頁面，包含各種font-style就像normal，bold，italics，oblique等，使用CSS定義。我想用不同的字體，每個font-style，比方說，myboldfont爲bold，myitalicsfont使用@font-face，像italics等我進口的字體，如何定義每種字體風格獨立的字體 - 我CSS

@font-face { 
    font-family: "MyNormal"; 
    font-style: normal; 
    font-weight: normal; 
    src: url("mynormalfont.woff") format("woff"); 
} 
@font-face { 
    font-family: "MyBold"; 
    font-style: normal; 
    font-weight: normal; 
    src: url("myboldfont.woff") format("woff"); 
} 
@font-face { 
    font-family: "MyItalics"; 
    font-style: normal; 
    font-weight: normal; 
    src: url("myitalicsfont.woff") format("woff"); 
} 
@font-face { 
    font-family: "MyOblique"; 
    font-style: normal; 
    font-weight: normal; 
    src: url("myobliquefont.woff") format("woff"); 
}

和進口普通，斜體，粗體和斜字體。我定義了body樣式;

body{ 
    font-family: MyNormal, MyBold, MyItalics, MyOblique; 
}

這是否足以定義所有font-style s在身體中的造型？我的意思是，如果我將font-style: italic或font-weight: bold分配給元素，那麼將使用斜體字體還是粗體字體？或者我該怎麼做才能做到這一點，所以如果我使用font-weight: bold作爲任何元素，應該使用myboldfont.woff。

在此先感謝... :)

來源

2013-03-28 blasteralfred Ψ

這應該工作：

@font-face { 
    font-family: "MyFont"; 
    font-style: normal; 
    font-weight: normal; 
    src: url("mynormalfont.woff") format("woff"); 
} 
@font-face { 
    font-family: "MyFont"; 
    font-style: normal; 
    font-weight: bold; 
    src: url("myboldfont.woff") format("woff"); 
}

這：

...{ 
    font-family:"MyFont"; 
    font-weight:bold; 
}...

然後你總是使用相同的名稱爲font-family，但你會改變不同的屬性。

來源

2013-03-28 05:36:08 JCOC611

只是爲了讓它更好....去在fontsquirrel生成多種字體格式。 – albert 2013-03-28 05:45:46

當超過1個權重鏈接到字體系列名稱時，IE8出現顯示問題。 – 2013-03-28 07:25:58

問題中列出的CSS是最安全的方法。當超過1個權重，或者超過4個權重或樣式鏈接到字體系列名稱時，IE8會有顯示問題。對每種字體變體使用獨特的字體系列名稱可避免此問題。

當爲每個字體變體使用唯一的字體系列名稱時，不需要在@ font-face聲明中或在使用該字體的HTML元素的CSS規則中標識權重或樣式。

此外，爲了支持儘可能多的瀏覽器，請將.woff，.ttf和.eot組合爲嵌入字體。這是TypeKit使用的方法：字體變體用於

@font-face { 
    font-family: 'MyNormal'; 
    src: url('mynormalfont.eot'); 
    src: url('mynormalfont.eot?#iefix') 
      format('embedded-opentype'), 
     url('mynormalfont.woff') format('woff'), 
     url('mynormalfont.ttf') format('truetype'); 
} 
@font-face { 
    font-family: 'MyBold'; 
    src: url('myboldfont.eot'); 
    src: url('myboldfont.eot?#iefix') 
      format('embedded-opentype'), 
     url('myboldfont.woff') format('woff'), 
     url('myboldfont.ttf') format('truetype'); 
} 
@font-face { 
    font-family: 'MyItalics'; 
    src: url('myitalicsfont.eot'); 
    src: url('myitalicsfont.eot?#iefix') 
      format('embedded-opentype'), 
     url('myitalicsfont.woff') format('woff'), 
     url('myitalicsfont.ttf') format('truetype'); 
} 
@font-face { 
    font-family: 'MyOblique'; 
    src: url('myobliquefont.eot'); 
    src: url('myobliquefont.eot?#iefix') 
      format('embedded-opentype'), 
     url('myobliquefont.woff') format('woff'), 
     url('myobliquefont.ttf') format('truetype'); 
}

，並按如下：

p { 
    font-family: MyNormal, sans-serif; /* Still useful to add fallback fonts */ 
    font-size: 12px; 
} 
h2 { 
    font-family: MyBold, sans-serif; 
    font-size: 20px; 
}

缺點是字體家族名稱中使用每一個CSS規則中指定其中一種字體變體。但是，這可以被認爲是目前必須支付廣泛的跨瀏覽器支持的價格。

來源

2013-03-28 07:37:37

如何定義每種字體風格獨立的字體 - 我CSS

回答

相關問題