css - 在本地使用 Google 网络字体

Question

我的主题有以下代码:

@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;
}

如何使用我的主题显示粗体和强大的标签？

Answer 1

根据您的最新更新，您可以按照以下方式进行操作:

@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'; }