10种漂亮的谷歌字体组合应用

这篇文章的灵感来自Design Shack的另一篇同类型文章 —— 同样是列举10种常用谷歌字体的组合应用。但是目前谷歌字体库已经增加了不少新字体,所以本文所述字体则是根据我自己所选的新型字体。要掌握如何安装谷歌字体,您可以查看之前所写的这一篇,讲述的是,您可以手动安装谷歌字体,也可以通过插件WP-Google-Fonts来导入谷歌字体。

Lobster Two & Lato

Lobster2Lato

Lobster 是出自Pablo Impallari 之手的第一种字体,而他最近创建的一种字体是 Lobster Two ,也就是Lobster, 不过这种字体倾斜度没那么厉害,用来做标题字体实在漂亮。这里我将它拿来跟Lato 组合使用。Lato 是一种朴素的字体,属于 sans serif 的一种类型,跟Lobster Two 搭配使用,能为Lobster Two 增色不少。

代码

插入到header.php文件中的<head>标签之前:

<link href='http://fonts.googleapis.com/css?family=Josefin+Slab|Muli|Lato|Nobile|Lobster+Two&subset=latin&v2' rel='stylesheet' type='text/css'>

或者

添加到style.css样式表文件中:

@import url(http://fonts.googleapis.com/css?family=Josefin+Slab|Muli|Lato|Nobile|Lobster+Two&subset=latin&v2);
CSS

添加到style.css样式表中:

h1 {
font-family: 'Lobster Two', Georgia, cursive;
font-style: normal;
font-weight: 400;
font-size: 64px;
text-transform: none;
text-decoration: none;
letter-spacing: 0em;
word-spacing: 0em;
line-height: 0.6;
}

p {
font-family: 'Lato', sans-serif;
font-style: normal;
font-weight: 400;
font-size: 13px;
text-transform: none;
text-decoration: none;
letter-spacing: 0em;
word-spacing: 0em;
line-height: 1.4;
}

 

下面是另外九种字体的组合应用,使用方法跟上面第一种字体一样。

Terminal Dosis & Caudex

TerminalDosisCaudex

Terminal Dosis 也是属于sans-serif 字体的一种,很漂亮,适合用来做标题字体。这种构造精巧的字体并不适合用于阅读篇幅比较大的文本,但它看起来确实相当美观,特别是跟 serif 字体 Caudex搭配使用的时候,更加抢眼。

<link>链接:
<link href='http://fonts.googleapis.com/css?family=Terminal+Dosis+Light|Caudex&v2' rel='stylesheet' type='text/css'>

@import导入:

@import url(http://fonts.googleapis.com/css?family=Terminal+Dosis+Light|Caudex&v2);

Josefin Slab & Ubuntu

josefinslabubuntu

<link>链接:
<link href='http://fonts.googleapis.com/css?family=Josefin+Slab:600|Ubuntu&v2' rel='stylesheet' type='text/css'>

@import导入:

@import url(http://fonts.googleapis.com/css?family=Josefin+Slab:600|Ubuntu&v2);

Stardos Stencil & Muli

stardosstncilmuli

<link>链接:
<link href='http://fonts.googleapis.com/css?family=Stardos+Stencil|Muli&v2' rel='stylesheet' type='text/css'>

@import导入:

@import url(http://fonts.googleapis.com/css?family=Stardos+Stencil|Muli&v2);

Corben & Varela

corben

<link>链接:
<link href='http://fonts.googleapis.com/css?family=Corben:700|Varela&v2' rel='stylesheet' type='text/css'>

@import导入:

@import url(http://fonts.googleapis.com/css?family=Corben:700|Varela&v2);

Limelight & Merriweather

limelightmerriweather

<link>链接:
<link href='http://fonts.googleapis.com/css?family=Varela|Limelight|Merriweather&v2' rel='stylesheet' type='text/css'>

@import导入:

@import url(http://fonts.googleapis.com/css?family=Varela|Limelight|Merriweather&v2);

Radley & PT Sans

RadleyPTSans

<link>链接:
<link href='http://fonts.googleapis.com/css?family=Radley|PT+Sans&v2' rel='stylesheet' type='text/css'>

@import导入:

@import url(http://fonts.googleapis.com/css?family=Radley|PT+Sans&v2);

Bowlby One SC & Maven Pro

bowlbymaven

<link>链接:
<link href='http://fonts.googleapis.com/css?family=Bowlby+One+SC|Maven+Pro&v2' rel='stylesheet' type='text/css'>

@import导入:

@import url(http://fonts.googleapis.com/css?family=Bowlby+One+SC|Maven+Pro&v2);

Podkova & Mako

PodkovaMako

<link>链接:
<link href='http://fonts.googleapis.com/css?family=Podkova|Mako&v2' rel='stylesheet' type='text/css'>

@import导入:

@import url(http://fonts.googleapis.com/css?family=Podkova|Mako&v2);

Didact Gothic & PT Serif

didactpt

<link>链接:
<link href='http://fonts.googleapis.com/css?family=Didact+Gothic|PT+Serif&v2' rel='stylesheet' type='text/css'>

@import导入:

@import url(http://fonts.googleapis.com/css?family=Didact+Gothic|PT+Serif&v2);

原文:wpmu

你可能还喜欢:

分享这篇日志:

发表评论

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

您可以使用这些 HTML 标签和属性: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>