Question

我的自定义css具有以下代码

h1 a  { 
  font-family:'Droid Sans Mono''Share Tech Mono''Ropa Sans', sans-serif;
'Poiret One''Cutive Mono''Helvetica Neue''Arial'; !important;
}

这是我自定义css的顶部：

@import url (http://fonts.googleapis.com/css?family=Roboto|Droid+Sans+Mono|Share+Tech+Mono|Ropa+Sans|Cutive+Mono|Poiret+One|Lato:100,600,900) ;

我的页面代码是：

<h1 style="font-size: 25px; font-weight: bold; color: #ffffff; hover font-family:'Droid Sans Mono''Share Tech Mono''Ropa Sans', sans-serif;"><a href="http://www.xxx.com/?page_id=4348"></h1>

但是这些字体似乎都没有加载。我做错了什么？

Answer 1

您正在自定义CSS中加载CSS，这很好，但您没有正确调用它。

你有这个：

h1 a  { 
  font-family:'Droid Sans Mono''Share Tech Mono''Ropa Sans', sans-serif;
  'Poiret One''Cutive Mono''Helvetica Neue''Arial'; !important;
}

这个代码不仅错误，而且可怕。

这应该是这样的：

h1 a  { 
  font-family: 'Droid Sans Mono', 'Share Tech Mono', 'Ropa Sans', sans-serif, 'Poiret One', 'Cutive Mono', 'Helvetica Neue', 'Arial' !important;
}

每个新的字体调用都应该与,分开，!important在;之前，而且样式在; >非常结束的css样式规则。

同样只是为了记录，没有充分的理由需要包含这么多字体，如果Droid Sans Mono和Share Tech Mono甚至Ropa Sans没有加载， sans-serif加载sans-serif之后的所有内容都将成为首选字体，因为它是默认选项，应该只用作最后的手段/后备（如果您还有其他选择）你想要优先考虑的字体，即）。

如果他们确实加载了，那么您只会使用Droid Sans Mono，然后浪费所有其他字体。

确保您实际使用所有这些字体，因为它可能会大大减慢网站加载时间。

旁注：

请尝试避免使用内联css（在html属性中使用style的css）。但是，如果您必须这样做，则还需要修复h1标记：

<h1 style="font-size: 25px; font-weight: bold; color: #ffffff; font-family:'Droid Sans Mono', 'Share Tech Mono', 'Ropa Sans', sans-serif;"><a href="http://www.xxx.com/?page_id=4348"></h1>

不要在其中加入hover这个词，因为它会破坏你的CSS以及很有可能无法运行的任何东西。同样，将每个字体实例与,分开，并在每个新的css样式规则后只有;。

您不需要内联css和css文件两种相同的属性，只需使用.css文件。

请确保您有url(而非url (。虽然它是一个简单的（空格），但它是一个函数，如果(不在url之后，则无效。

Answer 2

你没有在任何地方加载字体。我建议你安装并使用这个插件：http://wordpress.org/plugins/wp-google-fonts/

您将在网站上选择所需的字体，然后您就可以使用它。希望这有帮助

如何在wordpress中使用Google字体？

2 个答案: