logo标签列表

字体系列Open Sans无法工作

htmlcssfontsgoogle-font-api
11

我在我的网站上使用Open Sans字体，但它不能在所有电脑上正常工作，我不知道为什么。

我在<head>标签中调用它。我尝试过https、http或//，结果都一样。

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

它从浏览器中很好地加载（状态码为200）。

我的CSS看起来像这样：

body{
  font-family: OpenSans;
}

尽管CSS检查器中提到了Open Sans字体，但我的文本被呈现为一些无衬线字体。即使我从Chrome浏览器的CSS检查器中删除了所有font-family，字体也不会改变。而且，如果我添加!important，仍然没有任何变化。

这个问题的根源是什么？

我已经尝试了这个解决方案，但没有成功。

我认为这不是一个冲突问题，因为它在某些计算机上可以正常工作。

1
你需要展示你的CSS，以便我们进行评估。 - DA.
你可能有一个与更高特异性冲突的样式。请参考这个计算器，了解如何计算选择器特异性的更多信息。将body { font-family: 'Open Sans', sans-serif !important; }添加到你的样式表中。如果在结尾处添加了!important;并且有效，则支持这个理论，即一个样式正在覆盖你原来的Open Sans字体系列声明。查找浏览器开发者工具中的样式并将其删除。确保同时删除!important;。这将有助于调试，但不应该继续使用。 - War10ck
另外，请检查您的URL是否有效。我忘记了，但有些情况下“//”无法工作（可能是某些浏览器）。 - DA.
仅仅注入<link href="..." type='text/css' />是不足以在网站上使用字体的。你还应该像@War10ck建议的那样，在链接标签后面添加<style>body { font-family: 'Open Sans', sans-serif !important; }</style>。 - ankhzet
3个回答
15

好的，我的主要错误是使用了font-family: OpenSans;而不是font-family: 'Open Sans';

6

你是否尝试使用https引用你的CSS？

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

我在JSFiddle上尝试了这个代码，它在我的Chrome浏览器中可以正常工作。 https://jsfiddle.net/doqvqfhe/1/

您能提供更多的代码吗？

3
我使用字体族为"Open Sans"，它可以代替"OpenSans"。
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接