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

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

一个快速的例子:

这是一个例子,复制下面的HTML代码到一个文件中:

Html代码  

  1. <html>
  2. <head>
  3. <link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Tangerine">
  4. <style>
  5. body {
  6. font-family: ‘Tangerine‘, serif;
  7. font-size: 48px;
  8. }
  9. </style>
  10. </head>
  11. <body>
  12. <h1>Making the Web Beautiful!</h1>
  13. </body>
  14. </html>

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


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

Html代码  

  1. body {
  2. font-family: ‘Tangerine‘, serif;
  3. font-size: 48px;
  4. text-shadow: 4px 4px 4px #aaa;
  5. }

你可以看到,文字下面有阴影了:


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

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

Html代码  

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

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

Html代码  

  1. CSS selector {
  2. font-family: ‘Font Name‘, serif;
  3. }

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

Html代码  

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

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

您可以使用的网络字体一览,可以参见 谷歌字体目录 。

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

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

Html代码  

  1. http://fonts.googleapis.com/css

然后加入字体集的URL参数,可以使用一个或多个字体集的名字和样式。
例如,请求 Inconsolata 字体:

Html代码  

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

    注意: 要用加号(+)替换字体集名字中的所有空格。

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

Html代码  

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

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

Html代码  

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

要知道提供的字体有哪些大小和样式,需要查询谷歌字体目录 。
对于您所请求的每一个样式,您既可以提供全名也可以提供缩写,对于大小,您可以另外指定一个数字:

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

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

Html代码  

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

Html代码  

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

Html代码  

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

 指定脚本的子集:

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

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

Html代码  

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

Philosophe 字体请求拉丁和西里尔子集,URL应该写成:

Html代码  

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

要得到一个完整的字体和字体子集的列表,请参照谷歌字体目录 。

以上翻译自Google官方文档,原文连接:http://code.google.com/intl/zh-CN/apis/webfonts/docs/getting_started.html

虽然官方连接里是zh-CN,但打开还是英文的,自己翻译了一下,翻的很不好。。。。。

时间: 2024-10-10 11:19:26

谷歌字体(Google Font)初探 [翻译自Google官方文档]的相关文章

【翻译】Xibo官方文档2-CMS Installation

CMS初始化 Xibo内容管理系统(CMS)是一款基于mysql数据库的PHP语言开发的web应用.PHP加Mysql的组合在web平台开发中非常流行,并且能够同时兼容Linux服务或windows服务. 这里,我们提供一些基础的关于安装个人web服务的介绍,但是我们推荐您使用基于云服务的解决方案或者由专业的IT部门进行管理,如果您的广告牌应用非常的重要或是稳定性要求非常高. 初始化 本节中我们假设已经搭建好可以运行PHP和Mysql的web服务,并且已经将CMS安装包的压缩文件(zip或者ta

【翻译】Xibo官方文档3-Windows Client Installation

Windows客户端初始化 Xibo windows客户端是一个MSI文件,是一款标准的是需要双击就可以运行的安装程序. 按下述三个步骤进行安装: 1. 准备:最低的系统需求和MSI文件 2. 安装:双击MSI文件开始安装过程 3. 连接:将你的客户端连接到CMS上 最低系统需求 Xibo是一款低资源广告解决方案,然而随着技术的进步,它仍然有最低的系统需求.安装过程将自动检测系统是否满足最低需求,为了让你更多的了解Xibo,最低系统需求如下所示: l 连接到CMS的网络(一般是通过互联网) l 

Google 官方文档解析之——Application Fundamentals

Android apps are written in the java programming language.The Android SDK tools compile your code-along with any data and resource file-into an APK:an Android package,which is an archive file with an .apk suffix.One APK file contains all the contents

Android Google官方文档解析之——Device Compatibility

Android is designed to run on many different types of devices, from phones to tablets and televisions. As a developer, the range of devices provides a huge potential audience for your app. In order for your app to be successful on all these devices,

Android Google官方文档(cn)解析之——Intents and Intent filter

应用程序核心组件中的三个Activity,service,还有broadcast receiver都是通过一个叫做intent的消息激活的.Intent消息传送是在相同或不同的应用程序中的组件之间后运行时绑定的一个设施.Intent对象也就是它自己是一个数据结构,这个数据结构持有将要执行操作的抽象描述,或者在broadcast的情况下,是一个已经发生而将要宣布的描述.为传递intent到每个不同类型的组件有单独的机制: 一个Intent对象被传递到Context.startActivity()或

Android Google官方文档解析之——System Permissions

Android is a privilege-separated operating system, in which each application runs with a distinct system identity (Linux user ID and group ID). Parts of the system are also separated into distinct identities. Linux thereby isolates applications from

Android官方文档training中英文翻译目录大全:29篇已翻译,45篇未翻译

Android官方文档training中英文翻译目录大全:29篇已翻译,45篇未翻译 1. Getting Started Building Your First App: 原文: https://developer.android.com/training/basics/firstapp/index.html译文:http://wiki.eoeandroid.com/Building_Your_First_AppAdding the Action Bar:原文:https://develope

别开心太早,Python 官方文档的翻译差远了

近几天,很多公众号发布了 Python 官方文档的消息.然而,一个特别奇怪的现象就发生了,让人啼笑皆非. Python 文档的中文翻译工作一直是“默默无闻”,几个月前,我还吐槽过这件事<再聊聊Python中文社区的翻译>,当时我们的进度是 10.3%,远远落后于日本和法国,甚至落后于巴西! 这次所谓的中文版,当然是未完成翻译的残品.刚查了下,整体进度是 19.7%. 翻译进度不足20% 有的公众号在发布消息的时候,说明了这不是官宣.不是正式发布版,还指出了中文版的访问地址是隐藏入口.这都是忠于

自己翻译 delegation 官方文档

什么是代理,知道怎么用,见过N次.会用代理传值,还不够.代理到底是用来干嘛的嘛?还是看看官方文档吧,自己翻译出来看看是不是通顺 代理: 代理是一个简单高效的模式,尤其是一个类在编程的过程中代表或者需要和另一个类协调的时候.委托对象(委托方)会持有代理对象(代理方)的一个引用,并在合适的时机给代理方发送一个消息.这个消息通知代理方,委托方将要处理一个件事或者刚处理完一件事.代理方可能会对这个消息做出相应,如更新自己或者其他类的界面或状态,并且在一些情况下,代理方可以返回一个值,来影响一个即将被处理