使用带有谷歌字体的粗体和斜体标签

Question

我试图使用谷歌字体和italic,它根本不工作.我在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>

Answer 1

根据说明使用字体（除非您很好地了解字体的工作原理并且可以故意偏离说明）。在界面中，如果您只需要正常、斜体和粗体（但不是斜体粗体），请选择“正常”（默认选择）、“正常斜体”和“粗体”。然后谷歌会告诉你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>

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 font-type和指南时声明的。