谷歌字体（Google Font）初探 [翻译自Google官方文档]

最新推荐文章于 2023-08-22 15:51:31 发布

文艺er

最新推荐文章于 2023-08-22 15:51:31 发布

阅读量1.1k

点赞数

分类专栏：前端技术文章标签：笔记谷歌字体

前端技术专栏收录该内容

33 篇文章 0 订阅

订阅专栏

这个指南解释了如何使用Google Font的API,把网络字体添加到自己的页面上。你不需要任何的编码,你所要做的只是添加一个特定的CSS到HTML页面上，然后把字体关联到这个CSS样式。
一个快速的例子：
这是一个例子，复制下面的HTML代码到一个文件中：

<html>
  <head>
    <link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Tangerine">
    <style>
      body {
        font-family: 'Tangerine', serif;
        font-size: 48px;
      }
    </style>
  </head>
  <body>
    <h1>Making the Web Beautiful!</h1>
  </body>
</html>

用一个现代浏览器打开这个HTML文件，你就可以看到页面显示如下，用了一个叫做“Tangerine”的字体：

个句子是普通的文本，所以你可以通过使用CSS来改变它的样式。试着在前面的例子中添加一个阴影的样式：

body {
  font-family: 'Tangerine', serif;
  font-size: 48px;
  text-shadow: 4px 4px 4px #aaa;
}

你可以看到，文字下面有阴影了：

这只是你能用字体API和CSS做东西的一个开始。

概述：
您开始使用Google字体API只需要两个步骤：
1.添加一个样式表来请求网络字体

<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Font+Name">

2.同样，在一个样式表中定义一个使用所请求的网络字体的节点

CSS selector {  
  font-family: 'Font Name', serif;  
}

或者在这个节点上使用内嵌的样式

<div style="font-family: 'Font Name', serif;">Your text</div>

注意： 当在CSS样式表中定义一个网络字体时，总是要列出至少一个网络安全的回退字体（fallback web-safe font ）用来避免不希望的行为。特别是在列表的最后添加一个CSS默认字体，像名为“serif”或者“sans-serif”的字体。这样的话在必要的时候浏览器可以回退到它的默认字体。

谷歌字体目录：http://www.google.com/fonts

在样式表的URL中指定字体集和样式：

要决定在您的样式表连接中使用什么URL，就需要从谷歌字体API的基本URL开始：

http://fonts.googleapis.com/css

然后加入字体集的URL参数，可以使用一个或多个字体集的名字和样式。

例如，请求 Inconsolata 字体：

http://fonts.googleapis.com/css?family=Inconsolata

注意： 要用加号（+）替换字体集名字中的所有空格。

要请求多个字体集时，要用竖线（|）来隔开名字。
例如，要请求Tangerine , Inconsolata , 和 Droid Sans 三种字体:

http://fonts.googleapis.com/css?family=Tangerine|Inconsolata|Droid+Sans

请求多种字体，可以允许您在您的页面上使用所有这些字体。（但是您也不要太离谱，大多数页面不需要非常多的字体，而且请求很多字体会使您的页面加载变慢。）
字体API默认情况下提供了所请求字体的普通版本。要请求其它的样式或大小，在字体的名字后面加一个冒号（：），跟随在后的一系列的样式和大小用逗号（，）分格。
例如：

http://fonts.googleapis.com/css?family=Tangerine:bold,bolditalic|Inconsolata:italic|Droid+Sans

对于您所请求的每一个样式，您既可以提供全名也可以提供缩写，对于大小，您可以另外指定一个数字：

样式	符号
斜体	italic 或 i
粗体	bold 或 b 或者是一个数字，就像700
粗体斜体	bolditalic 或 bi

例如，请求 “Cantarell” 斜体和 “Droid Serif”粗体，您可以使用下面的任何一个URL：

http://fonts.googleapis.com/css?family=Cantarell:italic|Droid+Serif:bold

http://fonts.googleapis.com/css?family=Cantarell:i|Droid+Serif:b

http://fonts.googleapis.com/css?family=Cantarell:i|Droid+Serif:700

指定脚本的子集：

一些字体在谷歌字体目录中支持多种脚本（就像拉丁和西里尔），为了指定哪一个子集将被下载，需要在URL后面增加子集参数。

例如，为Philosopher 字体指定西里尔子集，URL应该写成：

http://fonts.googleapis.com/css?family=Philosopher&subset=cyrillic

为Philosophe 字体请求拉丁和西里尔子集，URL应该写成：

http://fonts.googleapis.com/css?family=Philosopher&subset=latin,cyrillic

谷歌字体:https://developers.google.com/fonts/docs/getting_started

文艺er

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
谷歌字体（Google Font）初探 [翻译自Google官方文档]

这个指南解释了如何使用Google Font的API,把网络字体添加到自己的页面上。你不需要任何的编码,你所要做的只是添加一个特定的CSS到HTML页面上，然后把字体关联到这个CSS样式。
复制链接

扫一扫