html - 如何在wordpress中使用谷歌字体？

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 之后，则将不起作用。