如何在 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 之后的任何内容都不会加载load as 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/

您将在您的网站上选择您想要的字体并且您将能够使用它。 希望这会有所帮助