正確使用CSS @ font-face

嗨我有一個使用CSS @ font-face創建字體系列的快速問題。正確使用CSS @ font-face

傳統上，我用來設置我的CSS的字體是這樣的：

@font-face { 
    font-family: 'My Font Regular'; 
    src: url('fonts/myfont.ttf'); 
} 
@font-face { 
    font-family: 'My Font Bold'; 
    src: url('fonts/myfont-bold.ttf'); 
} 
p { font-family: "My Font Regular";} 
strong {font-family: "My Font Bold";}

但是我最近發現，你可以做這樣的：

@font-face { 
    font-family: 'My Font'; 
    src: url('fonts/myfont.ttf'); 
    font-style:normal; 
    font-weight:normal; 
} 
@font-face { 
    font-family: 'My Font'; 
    src: url('fonts/myfont-bold.ttf'); 
    font-style:normal; 
    font-weight:bold; 
} 
p { 
font-family: "My Font" ; 
font-style:normal; 
font-weight:normal; 
} 
strong { 
font-family: "My Font" ; 
font-style:normal; 
font-weight:bold; 
}

我的問題是，如果我例如，使用第二種粗體技術，文本是否仍然使用自定義.eot呈現，或者瀏覽器是否會嘗試模擬它，而不使用實際的粗體字體文件？

感謝

來源

2014-01-29 user3143218

請參閱[如何使用@ font-face定義粗體和斜體]（http://stackoverflow.com/questions/2436749/how-to-define-bold-italic-using-font-face）。作爲一面請注意，請注意[除IE以外的任何瀏覽器都不支持EOT格式]（http://caniuse.com/eot）。 – Boaz

這就是我正在尋找的。謝謝 – user3143218

下面是我用一個例子：

 @font-face { 
      font-family: 'Franklin Demi'; 
      src: url('FranklinDemi.eot'), 
       url('FranklinDemi.ttf') format('truetype'), 
       url('FranklinDemi.svg#font') format('svg'); 
      } 
     @font-face { 
      font-family: 'Franklin Heavy'; 
      src: url('FranklinHeavy.eot'), 
       url('FranklinHeavy.ttf') format('truetype'), 
       url('FranklinHeavy.svg#font') format('svg'); 
      } 
     .sidansTitel{ 
      font-family: 'Franklin Demi'; 
      font-size: 22pt; 
      color: #8b9ba7; 
      text-shadow: 0 1px 0 rgba(0,0,0,0.01); 
      } 
     .sidansTitel b{ 
      font-family: 'Franklin Heavy'; 
      font-weight: normal; 
      font-style: normal; 
      }

同時設置font-weight: normal;和font-style: normal;使字體在IE/FF /鉻很好地渲染，沒有它，它看起來像在Chrome廢話。我相信它看起來像Chrome中的垃圾，因爲它試圖以粗體呈現粗體字體，這應該由此來修復。

編輯：拼寫

來源

2014-01-29 15:26:03 Avisari

如果你的字體文件是加粗的字體，這將是多餘的設置font-weight: bold，而且也沒有必要申報font-weight: normal因爲這是默認值。您還應該使用多於.eot的文件，以便像其他瀏覽器一樣回退，就像其他瀏覽器一樣。

來源

2014-01-29 15:41:47 Jeff

正確使用CSS @ font-face

回答

相關問題