使用谷歌的Web字體本地

我的主題有以下代碼：使用谷歌的Web字體本地

@import url("http://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,300italic,400italic");

此字體不那麼我下載了一個支持土耳其字符支持土耳其字符。但是，主題在顯示大膽強壯的字體方面存在問題。

我想這個代碼，但沒有奏效：

@font-face { 
     font-family: '../fonts/SourceSansPro-Bold'; 
     src: url('../fonts/SourceSansPro-Bold.eot'); /* IE9 Compat Modes */ 
     src: url('../fonts/SourceSansPro-Bold.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ 
      url('../fonts/SourceSansPro-Bold.woff') format('woff'), /* Modern Browsers */ 
      url('../fonts/SourceSansPro-Bold.ttf') format('truetype'), /* Safari, Android, iOS */ 
      url('../fonts/SourceSansPro-Bold.svg#svgFontName') format('svg'); /* Legacy iOS */ 

    font-weight: bold; 
    font-style: normal; 
}

我如何可以顯示使用我的主題，大膽和強有力的標籤？

來源

2014-09-30 nikel

沒有理由使用'字體重量：大膽;'因爲這已經是一個大膽的字體。此外，font-family應該只是字體的名稱，而不是文件路徑。 IE'font-family：'SourceSansPro-Bold';' – APAD1 2014-09-30 21:33:52

謝謝你的回答。我試過這個：http://sudrap.org/paste/text/388527/，但所有的文本都變成了大膽的 – nikel 2014-09-30 21:42:31

所有使用該字體系列的文本都將變得粗體，因爲它是粗體字體。如果您需要常規版本的字體，則必須單獨定義該字體。 – APAD1 2014-09-30 21:43:25

基於把你最新的更新，這裏是你會怎麼做：

@charset "utf-8"; 
@import url(font-awesome.min.css); 
@font-face { 
    font-family: 'SourceSansPro-Regular'; 
    src: url('../fonts/SourceSansPro-Regular.eot'); /* IE9 Compat Modes */ 
    src: url('../fonts/SourceSansPro-Regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ 
     url('../fonts/SourceSansPro-Regular.woff') format('woff'), /* Modern Browsers */ 
     url('../fonts/SourceSansPro-Regular.ttf') format('truetype'), /* Safari, Android, iOS */ 
     url('../fonts/SourceSansPro-Regular.svg#svgFontName') format('svg'); /* Legacy iOS */ 
} 

@font-face { 
    font-family: 'SourceSansPro-Black'; 
    src: url('../fonts/SourceSansPro-Black.eot'); /* IE9 Compat Modes */ 
    src: url('../fonts/SourceSansPro-Black.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ 
     url('../fonts/SourceSansPro-Black.woff') format('woff'), /* Modern Browsers */ 
     url('../fonts/SourceSansPro-Black.ttf') format('truetype'), /* Safari, Android, iOS */ 
     url('../fonts/SourceSansPro-Black.svg#svgFontName') format('svg'); /* Legacy iOS */ 
} 

@font-face { 
    font-family: 'SourceSansPro-Bold'; 
    src: url('../fonts/SourceSansPro-Bold.eot'); /* IE9 Compat Modes */ 
    src: url('../fonts/SourceSansPro-Bold.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ 
     url('../fonts/SourceSansPro-Bold.woff') format('woff'), /* Modern Browsers */ 
     url('../fonts/SourceSansPro-Bold.ttf') format('truetype'), /* Safari, Android, iOS */ 
     url('../fonts/SourceSansPro-Bold.svg#svgFontName') format('svg'); /* Legacy iOS */ 
}

然後讓我們說你想要的H1是大膽和P標籤是正規的CSS是這樣的：

h1 { font-family: 'SourceSansPro-Bold'; } 
p { font-family: 'SourceSansPro-Regular'; }

來源

2014-09-30 21:51:52 APAD1

＆subset = latin-ext for google字體效果更好。不管怎麼說，還是要謝謝你。 – nikel 2014-09-30 22:52:02

嘗試：

@font-face { 
     font-family: 'Source Sans Pro'; 
     src: url('../fonts/SourceSansPro-Bold.eot'); /* IE9 Compat Modes */ 
     src: url('../fonts/SourceSansPro-Bold.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ 
      url('../fonts/SourceSansPro-Bold.woff') format('woff'), /* Modern Browsers */ 
      url('../fonts/SourceSansPro-Bold.ttf') format('truetype'), /* Safari, Android, iOS */ 
      url('../fonts/SourceSansPro-Bold.svg#svgFontName') format('svg'); /* Legacy iOS */ 

    font-weight: bold; 
    font-style: normal; 
}

通知的字體系列的名稱。該名稱應與Google Fonts中的名稱相匹配。

Here's an article about it

來源

2014-09-30 21:53:32 coopersita

感謝您的答案，我upvoted它，兩個答案都很好。我必須爲h1s按鈕找到合適的字體strongs，因爲我的主題不使用粗體屬性，它使用數字。 – nikel 2014-09-30 22:22:15

使用谷歌的Web字體本地

回答

相關問題