谷歌字体(Google Font)初探 [翻译自Google官方文档]
这个指南解释了如何使用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”的字体。这样的话在必要的时候浏览器可以回退到它的默认字体。
您可以使用的网络字体一览,可以参见 谷歌字体目录 。
在样式表的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
要得到一个完整的字体和字体子集的列表,请参照谷歌字体目录 。
以上翻译自Google官方文档,原文连接:http://code.google.com/intl/zh-CN/apis/webfonts/docs/getting_started.html
虽然官方连接里是zh-CN,但打开还是英文的,自己翻译了一下,翻的很不好。。。。。
谷歌字体(Google Font)初探 [翻译自Google官方文档]的更多相关文章
- Add In 简介(主要翻译于ESRI官方文档)
为ArcGIS桌面端建立Add In插件 平时以工作为主,有空时翻译一些文档,顺便练习英文,这个是因为用Add In来学习一下. 主要包括: 关于Add In 什么时候使用Add In Python ...
- 【JAVA集合框架一 】java集合框架官方介绍 Collections Framework Overview 集合框架总览 翻译 javase8 集合官方文档中文版
原文链接: https://docs.oracle.com/javase/8/docs/technotes/guides/collections/overview.html 原文内容也一并附加在本文最 ...
- [翻译]:Cinemachine 官方文档(0)
目录 Overview : Installation and Getting Started :安装并开始 User Guide :用户指南 What is Cinemachine? : 什么是Cin ...
- 在 Ubuntu 上安装 TensorFlow (官方文档的翻译)
本指南介绍了如何在 Ubuntu 上安装 TensorFlow.这些指令也可能对其他 Linux 变体起作用, 但是我们只在Ubuntu 14.04 或更高版本上测试了(我们只支持) 这些指令. 一 ...
- [翻译]PyMongo官方文档
PyMongo官方文档翻译 周煦辰 2016-06-30 这是本人翻译的PyMongo官方文档.现在网上分(抄)享(袭)的PyMongo博客文章很多,一方面这些文章本就是抄袭的,谈不上什么格式美观,另 ...
- Kryo官方文档-中文翻译
Kryo作为一个优秀的Java序列化方案,在网上能找到不少测评,但未见系统的中文入门或说明文档.官方文档是最好的学习文档.虽然英文不差,但啃下来毕竟没母语来的舒服.这里抽出时间做些翻译,以方便大家查阅 ...
- Google Android官方文档进程与线程(Processes and Threads)翻译
android的多线程在开发中已经有使用过了,想再系统地学习一下,找到了android的官方文档,介绍进程与线程的介绍,试着翻译一下. 原文地址:http://developer.android.co ...
- 人工智能系统Google开源的TensorFlow官方文档中文版
人工智能系统Google开源的TensorFlow官方文档中文版 2015年11月9日,Google发布人工智能系统TensorFlow并宣布开源,机器学习作为人工智能的一种类型,可以让软件根据大量的 ...
- 别开心太早,Python 官方文档的翻译差远了
近几天,很多公众号发布了 Python 官方文档的消息.然而,一个特别奇怪的现象就发生了,让人啼笑皆非. Python 文档的中文翻译工作一直是“默默无闻”,几个月前,我还吐槽过这件事<再聊聊P ...
随机推荐
- 无法加载协定为“JavaWebService.UserInfoDelegate”的终结点配置部分,因为找到了该协定的多个终结点配置。请按名称指示首选的终结点配置部分。
原因是: 在vs 2008中使用C#,多次添加/删除服务引用后,app.config文件并不会自动修改, 在添加/删除后,会生成多个“endpoint”,手工删除即可. app.config中的内容: ...
- RMSE均方根误差学习笔记
1.均方根误差,它是观测值与真值偏差的平方和观测次数n比值的平方根,在实际测量中,观测次数n总是有限的,真值只能用最可信赖(最佳)值来代替.方根误差对一组测量中的特大或特小误差反映非常敏感,所以,均方 ...
- Eclipse Kepler 设置中文编码 和 汉化
以下是 mac 下 Eclipse Kepper的设置 一:设置中文编码 1:打开Eclipse--Preference-->general--->editor---->Spelli ...
- 河流Shader
原地址:http://www.unity蛮牛.com/blog-2321-336.html Shader "Custom/TextureEffect" { Properties { ...
- Jquery重新学习之八[Ajax运用总结B]
上一篇简单介绍普通javascript以及Jquery的AJAX方法,其中Jquery.ajax()是功能比较强悍的底层方法,可以更多地关注实现过程中的细节:除Jquery.ajax()方法外,Jqu ...
- MySQL定位锁争用比较严重的表
1:查看当前的事务 mysql> SELECT * FROM information_schema.innodb_trx \G 2:查看当前锁定的事务 mysql> SELECT * FR ...
- mindmanager2018优化
mindmanager2018优化 CreationTime--2018年6月6日09:35:02 Author:Marydon 1.点击“文件”-“选项”进入配置界面,在“常规”选项中,建议勾选 ...
- Eclipse/Myeclipse中查看和调试JDK源代码的方法
看过这篇文章后,实践写的 http://blog.csdn.net/qq_27857857/article/details/71250401 一共做了以下几部: 第一步: 第二步: 一直next,到第 ...
- ubuntu系统——增加磁盘空间
1.df查看磁盘使用情况 2.将windows下的磁盘空间分出与部分给ubuntu 3.格式化磁盘 在终端输入:mkfs -t ext3 /dev/sdb1 用ext3格式对/dev/sd ...
- sqlserver学习笔记(一)—— 登录本机sqlserver、启动和停止sqlserver服务、创建和删除数据库
(重要参考:51自学网——SQL Server数据库教程) 首先按照网上教程安装好sqlserver,打开登录 登录本机sqlserver:①. ②localhost ③127.0.0.1 启动和停止 ...