如何正确地为wordpress添加Goolge字体

Goolge的网页字体是网页设计中的一大免费资源,可以有效地统一不同操作系统下的字体显示。在这篇文章中,我将介绍如何正确地为WordPress主题添加Google网页字体,以提升网页加载速度。

确定自己喜欢的Goolge字体

首先前往 http://www.google.com/fonts, 在Google的字体库中寻找一两款美观的字体,比如我找到的是Alegreya Sans字体。然后点击Quick Use按钮。

Google字体

 

点击Quick Use按钮后,在新的页面里下拉到第三栏。可以看到,第三栏有3个标签,每个标签下面都有一行代码。第一个标签下面的代码是我们推荐使用的代码,它使用 HTML link标签来加载Goolge字体的CSS文件。第二个标签下面的代码使用CSS @import来导入Google字体的CSS文件,第三个标签的代码使用JavaScript来加载CSS文件。

Google字体

 

我将告诉你如何分别使用这三种方法以及每种方法的好处和坏处。

使用HTML link标签加载外部CSS样式

第一种方法,也是标准的、推荐使用的方法。这种方法使用HTML的link标签来加载外部CSS样式。我们需要把Goolge在第三栏提供是 link这一行代码复制下来,然后添加到WordPress主题文件夹下面的header.php文件中。如果你要添加两种以上的字体,那么可以在这行代 码中用“|”符号同时添加这两种字体。将这行代码粘贴到header.php文件中其他link标签的上面。如下

谷歌字体

 

保存header.php文件后,我们就可以在CSS文件中使用Goolge字体了,比如我们可以在style.css文件中将h1标题行的字体设为Alegeraya Sans

h1{
font-size:30px;
font-family: 'Alegreya Sans', sans-serif;
}

如果你使用子主题,那么要将link这一行代码粘贴到子主题下面的header.php文件。

第二种方法:CSS @import

打开WordPress主题文件夹下面的style.css文件,将Goolge的@import代码粘贴到文件的开头。@import代码必须要在其他任何CSS规则的前面。如果你要添加两种以上的字体,那么可以在这行代码中用“|”符号同时添加这两种字体。如下:

/*
Theme Name: profitmag 
Theme URI: http://www.linuxdashen.com/
Description: profitmag child theme
Author: Tom and Jerry
Author URI: http://www.linuxdashen.com
Template: profitmag
Version: 1.0.0
*/

@import url("../profitmag/style.css");
@import url(https://fonts.googleapis.com/css?family=Quantico|PT+Sans);

.entry-content p > a {
border-bottom: 1px solid #336699;
color: #336699;
}
.....
.....

使用@import的一个坏处是浏览器必须要先下载完@import后面的CSS样式后才能下载下面的CSS,所以不推荐使用这种方法。

第三种方法:使用JavaScript加载字体

打开主题或子主题的header.php文件,将Google的JavaScript代码粘贴到文件中<head>标签的下一行。如下:

<html <?php language_attributes(); ?>>
<head>
<script type="text/javascript">
    WebFontConfig = {
      google: { families: [ 'PT+Sans::latin' ] }
    };
   (function() {
      var wf = document.createElement('script');
      wf.src = ('https:' == document.location.protocol ? 'https' : 'http') +
      '://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js';
      wf.type = 'text/javascript';
      wf.async = 'true';
      var s = document.getElementsByTagName('script')[0];
      s.parentNode.insertBefore(wf, s);
})(); </script>
<meta charset="<?php bloginfo( 'charset' ); ?>">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title><?php wp_title( '|', true, 'right' ); ?></title>
为这篇文章评分
[Total: 0 Average: 0]

发表评论

电子邮件地址不会被公开。 必填项已用*标注