如何将字体族设置为Opensans SemiboldItalic字体

Question

我想把一个<span>标签的字体族改成Opensans SemiboldItalic字体，但是我不知道怎么做？

#footer .container span {
    font-family: 'Open Sans Semibold';
}

- Duc Hop Tran

Answer 1

你需要使用font-weight和font-style来达到效果。

font-family: 'Open Sans', Arial, sans-serif;
font-weight: 600;
font-style: italic;

请确保您也调用了半粗斜体字重（600）：

<link href='//fonts.googleapis.com/css?family=Open+Sans:600italic' rel='stylesheet' type='text/css'>

- Samuel Liew

---

不要使用 href='http://fonts.googleapis.com/css?family=Open+Sans:600,400'，而是使用 href='//fonts.googleapis.com/css?family=Open+Sans:600,400' 更好。 - seenukarthi

好的，line font-weight: 600不起作用，替换为“bold”会更好。 - Duc Hop Tran

我相信这样做可以得到伪斜体（浏览器使字体变为斜体而非真正的斜体字体），因为这样只会调用常规字体和半粗体字体，而不是斜体字体。 - steveax

Answer 2

除非你愿意使用伪斜体（即让浏览器倾斜字体而不是显示斜体字体），否则你必须确保引入半粗斜体字体：

<link href='http://fonts.googleapis.com/css?family=Open+Sans:600italic' rel='stylesheet' type='text/css'>

如果您想要更多该系列的变体，您也需要将它们指定出来。例如，如果您想要400个正常和斜体以及600个正常和斜体，链接应该是：

<link href='http://fonts.googleapis.com/css?family=Open+Sans:400,400italic,600,600italic' rel='stylesheet' type='text/css'>

这将解析为以下样式：

@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400;
  src: local('Open Sans'), local('OpenSans'), url(http://fonts.gstatic.com/s/opensans/v13/cJZKeOuBrn4kERxqtaUH3ZBw1xU1rKptJj_0jans920.woff2) format('woff2');
}
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 600;
  src: local('Open Sans Semibold'), local('OpenSans-Semibold'), url(http://fonts.gstatic.com/s/opensans/v13/MTP_ySUJH_bn48VBG8sNShampu5_7CjHW5spxoeN3Vs.woff2) format('woff2');
}
@font-face {
  font-family: 'Open Sans';
  font-style: italic;
  font-weight: 400;
  src: local('Open Sans Italic'), local('OpenSans-Italic'), url(http://fonts.gstatic.com/s/opensans/v13/xjAJXh38I15wypJXxuGMBogp9Q8gbYrhqGlRav_IXfk.woff2) format('woff2');
}
@font-face {
  font-family: 'Open Sans';
  font-style: italic;
  font-weight: 600;
  src: local('Open Sans Semibold Italic'), local('OpenSans-SemiboldItalic'), url(http://fonts.gstatic.com/s/opensans/v13/PRmiXeptR36kaC0GEAetxsiAiQ_a33snTsJhwZvMEaI.woff2) format('woff2');
}

- steveax

Answer 3

如果您正在使用Google字体，您可以在右侧找到有关使用的简要教程： https://www.google.com/fonts#UsePlace:use/Collection:Open+Sans

font-family: 'Open Sans', sans-serif;

要更改字重，请参考上面的表格。Semi-Bold 的数字是 600，因此：

font-weight: 600;

就这么简单。

编辑：忘了斜体风格：

font-style: italic;

- Paul