使用加粗和斜体标签与谷歌字体

Question

我正在尝试在网页中使用谷歌字体来设置加粗和斜体，但是没有任何效果。 我在HTML中包含了以下代码。

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

例如，当我使用以下代码时，所有文本看起来“正常”，没有加粗和斜体，这是预期的。有什么建议吗？

谢谢。

<p>this is a <b>bold</b> text and this is <i>italic</i> text</p>

- user3355028

---

你制定了哪些CSS规则？ - j08691

似乎在Chrome中可以工作。不过我是使用CSS将字体应用于body的。http://codepen.io/ryanjgill/pen/MYyyYY - Ryan Gill

使用字体家族400来加粗。 - Giacomo Paita

@GiacomoPaita - font-weight: 400？font-family定义字体。而权重400表示正常。700则为粗体。 - Josh Burgess

Answer 1

按照字体的说明使用字体（除非您已经很好地了解字体的使用方法并且有意偏离说明）。在界面中，如果您只想要普通、斜体和加粗（但不是斜体加粗），请选择Normal（默认选项）、Normal Italic和Bold。然后Google会告诉您要使用哪个link元素。这样就能正常工作：

<link href='https://fonts.googleapis.com/css?family=Open+Sans:400,400italic,700' 
  rel='stylesheet' type='text/css'>
<style>
p { font-family: Open Sans }
</style>
<p>this is a <b>bold</b> text and this is <i>italic</i> text</p>

- Jukka K. Korpela

Answer 2

使用700字体声明：

@font-face {
   font-family: 'Open Sans';
   font-style: normal;
   font-weight: 700;
   src: local('Open Sans Extrabold'), local('OpenSans-Extrabold'),   
   url(http://themes.googleusercontent.com/static/fonts/opensans/v6/EInbV5DfGHOiMmvb1Xr-honF5uFdDttMLvmWuJdhhgs.ttf) format('truetype');
 }

或者，就像你的例子中的一样：

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

然后：

.yourClass {font-family: 'Open Sans'; font-weight: 700;}

同样的方法也适用于斜体字，就像在定义CSS字体类型和指南中所述。

- Giacomo Paita