为什么我的CSS看起来与你的CSS不同？

Question

我希望我的网页与这个漂亮的文字Dan Wahiln's AngularJS tutorial

具有相同的文字风格

所以在Chrome开发者工具中：我可以看到以下内容：

font-size: 12pt;
line-height: 1.8em;
font-family: "Open Sans",Calibri,Candara,Arial,sans-serif;

请看下图：

现在我的CSS：

p.test-fonts {
    font-family: "Open Sans",Calibri,Candara,Arial,sans-serif;
    font-size: 12pt;
    line-height: 1.8em;

    margin: 0 0 10.5px
}

但是，文本呈现方式不同::

为什么会出现这种差异？

Answer 1

如果你查看他的来源，你会看到他包括样式表：

http://fonts.googleapis.com/css?family=Open+Sans:400italic,700italic,400,700

包括：

@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/v10/cJZKeOuBrn4kERxqtaUH3T8E0i7KZn-EPnyo3HZu7kw.woff") format("woff");
}
@font-face {
    font-family: "Open Sans";
    font-style: normal;
    font-weight: 700;
    src: local("Open Sans Bold"), local("OpenSans-Bold"), url("http://fonts.gstatic.com/s/opensans/v10/k3k702ZOKiLJc3WVjuplzHhCUOGz7vYGh680lGh-uXM.woff") format("woff");
}
@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/v10/xjAJXh38I15wypJXxuGMBobN6UDyHWBl620a-IRfuBk.woff") format("woff");
}
@font-face {
    font-family: "Open Sans";
    font-style: italic;
    font-weight: 700;
    src: local("Open Sans Bold Italic"), local("OpenSans-BoldItalic"), url("http://fonts.gstatic.com/s/opensans/v10/PRmiXeptR36kaC0GEAetxjqR_3kx9_hJXbbyU8S6IN0.woff") format("woff");
}

Answer 2

您的项目中是否有Open Sans字体？ Open-sans不是浏览器默认字体，您需要手动包含它，它是Google字体提供的字体，因此您需要在文档中调用它，而从CSS到@import或在.html中的DOM内部文件。

如果您访问GoogleFonts网站http://www.google.com/fonts并查找“Open-sans”，您将找到有关如何使用它的所有选项，您必须选择要使用的权重和您要导入的不同样式，因为每个差异都是实际的独立字体，因此当您增加网站可用的变体数量时，它们的权重会更高。

ALSO 您正在查看从浏览器上的“文件”声明加载它的文档，如果您使用的是Windows，则建议您使用本地计算机（如Xampp），以便在CSS上使用相对路径时不会出现URL问题。