(转)Google Fonts 的介绍与使用
转载自“前端笔记” http://www.cnblogs.com/milly/archive/2013/05/10/google-fonts.html
Google Fonts 是什么?(以下翻译为谷歌字体)
加载谷歌字体的标准方式:
关于谷歌字体
使用在线字体的页面将更加漂亮,更具可读性、可访问性与开放性。
谷歌字体让所有人,包括专业的设计师与开发者可以快速、简便的使用在线字体,我们相信每个人都可以在他们的网页与应用中使用高质量的字体。
我们的目标是创建一个可以为世界各地的人所使用的在线字体目录。通过我们的 API 服务可以在几秒内为您的网站添加谷歌字体,该服务不仅快速、可靠,而且还是免费的。
开源字体
谷歌字体都是开源的,这意味着你可以自由地与你的朋友与同事分享,甚至可以基于它们定制自己的字体,或者与原来的设计师共同改善他们;你还可以以任何一种方式使用它们,私人或商业,包括印刷,在电脑上使用,或者网站使用。
我们正在与世界各地的设计师协商发布高质量的在线字体,如果你是一名字体设计师并且希望参与其中,请联系我们。
许多谷歌的页面已经在使用谷歌字体,例如谷歌的关于页与谷歌世界遗产项目,它们都使用了 Open Sans 这款字体。
以上简介翻译自>>http://www.google.com/fonts/#AboutPlace:about
使用谷歌字体的好处?
- 使用谷歌字体可以使页面更加美观
- 不必担心访问者电脑上没有安装该字体而导致与预期不一致的效果
注:谷歌字体仅适用于英文页面,因为英文字体文件较小(K级别),中文或其它语言的文字由于不像英文仅需要26个字母组成,字体文件较大(均为M级别),以目前的网速没有实际意义。
如何使用谷歌字体?
1.进入 Google Fonts 主页>>http://www.google.com/fonts/
2.将鼠标移动到喜欢的字体上面,然后点击 Add to Collection,可以选择多款字体,目前 Google Fonts 上有625款字体;
3.然后点击右下角的 review 按钮预览效果;
4.接着点击 Use 按钮来到使用介绍页面,该页面中还会提示字体大致的加载时间,所以尽可能的少选字体,同时有的字体还提供了其它字符集,如果有需要也可以勾选,当然,勾选后同样会影响加载速度。
5.谷歌提供了三种方式在 HTML 中引入 Google Fonts
a.标准式:
<link href='http://fonts.googleapis.com/css?family=Swanky+and+Moo+Moo|Meie+Script' rel='stylesheet' type='text/css'>
b.导入式:
@import url(http://fonts.googleapis.com/css?family=Swanky+and+Moo+Moo|Meie+Script);
c.JavaScript方式:
<script type="text/javascript">WebFontConfig = {google: { families: [ 'Swanky+and+Moo+Moo::latin', 'Meie+Script::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>
6.接下来通过 CSS 的字体定义就可以方便使用了
font-family: 'Swanky and Moo Moo', cursive;
如果想让字体显示的好看一点,还可以使用 CSS3 进行简单操作,例如添加阴影效果
.font-effect {text-shadow: 4px 4px 4px #aaa;}
当然,谷歌字体还提供了一些强大的字体效果 API,通过它们可以实现一些高级效果,目前还处于测试阶段,必且除 webkit 内核浏览器外,其它浏览器并不完全支持。
使用方法:
在链接字体库时带入字体效果的参数
<link href='http://fonts.googleapis.com/css?family=Swanky+and+Moo+Moo&effect=brick-sign' rel='stylesheet'>
然后给文字添加特定格式的 class,前缀为 font-effect- ,然后是字体效果的 API 名。
<p class="font-effect-brick-sign">This is an easy example for google fonts.</p>
详细接口:https://developers.google.com/fonts/docs/getting_started?hl=en
下载地址:http://files.cnblogs.com/milly/google-fonts-sample.zip
转载于:https://www.cnblogs.com/wuyinghong/p/3621144.html
(转)Google Fonts 的介绍与使用相关推荐
- CSS 实用工具: Google Fonts API 引入免费字体库
CSS 实用工具: Google Fonts API 引入免费字体库 文章目录 CSS 实用工具: Google Fonts API 引入免费字体库 正文 1. Google Fonts 使用 2. ...
- Magento 添加 google font Adding a google fonts into Magento
方法一: In your theme located at app/design/frontend/YOUR_THEME/YOUR_TEMPLATE/layout/local.xml just a ...
- 将WordPress后台的open-sans字体加载源从Google Fonts换为360 CDN
2019独角兽企业重金招聘Python工程师标准>>> 针对最近因为Google fonts被墙导致WordPress 打开慢的问题,Jeff 在上一篇<Google Font ...
- Google Fonts 谷歌字体的使用
Google Font(免费) https://fonts.google.com/ 上面的链接打不开 可能需要代理 优势:英文字体齐全,所有 Google Fonts 字体都是开源且免费 劣势:中文字 ...
- HTML页面使用Google Fonts里的字体(vscode)
1.打开谷歌字体网站https://fonts.google.com/ 找到想要的字体,点击右侧select加号,然后点右上角的view selected family,在use web里复制字体ur ...
- 使用 Google Fonts 为网页添加美观字体
问题:如果设计中使用了非标准的字体,你该如何去实现 两种方式: 第一种使用图片代替 但是肯定是没有文字效果好,不利于seo 第二种 是用在线的字体 google 大多数网络会被墙,这个时候可以 ...
- Google Fonts的使用
Google Fonts官网 font-display: swap; 让字体文件本身变成异步的--浏览器会先显示我们的回退(fallback)文本,等Web字体可用时再切换过去. media=&quo ...
- Google Fonts 加速服务 国内镜像
LUG@USTC Google Fonts 加速服务 简介 自从 Google 抽风之后,WordPress 默认的 Google 字体也就跟着抽风了,表现就是某些用到特定字体的页面需要 " ...
- 国内外优秀前端 CDN,Google Fonts 国内镜像
CDN要求速度快,项目多,版本更新快,国内BootCDN.cn我觉得是最好的,没有之一,什么新浪,百度,360的都是给内部用的. 最近发现的css.net也不错啊,还反代了Google字体库,够快,很 ...
- 国内优秀前端 CDN,Google Fonts 国内镜像
CDN要求速度快,项目多,版本更新快 EWS CDN cdn.ews1.com CDNJS 原 cdnjs.cloudflare.com cdnjs - The #1 free and open so ...
最新文章
- R语言使用party包中的ctree函数构建条件推理决策树的流程和步骤、条件推理决策树是传统决策树的一个重要变体、条件推理树的分裂是基于显著性测试而不是熵/纯度/同质性度量来选择分裂
- c中调用python解释器
- spring-cloud Finchley.SR2版本 升级微服务到springboot 2.0
- python爬虫Scrapy框架之增量式爬虫
- NIO和BIO如何影响应用程序的设计-API调用
- python为什么是动态语言_python为什么是动态语言
- Python获取文件夹下的所有文件名
- R语言导出为html,科学网—[转载]R语言中数据的导入与导出(笔记) - 刘朋的博文...
- c语言加粗字体怎么弄,excel表格如何批量加粗文字
- mybatis+oracle批量插入报不符合协议和sql未正确结束
- 吉林大学超星学习通02(2)
- 我的世界联机侠怎么删除java_我的世界联机侠怎么增加房间人数
- Launcher3 翻页动画详解与修改
- AutoCAD Civil 3D 介绍
- 计算机知识产权查询,如何查询版权登记、计算机软件著作权登记?
- PowerApps教程02-了解软件运行逻辑
- HTML网页调用海康摄像头,[FastVideo]Web Html5 无插件方式连接海康摄像头[2]
- 2016年终总结:我只想成为自己喜欢的人 不负己心 不负此生
- 兰大本科生发31篇论文引质疑,研究范围从改革开放到呼吸道感染,本人:我努力有错吗?...
- Linux9.23.1
热门文章
- 遥感高光谱分类文献阅读:Going Deeper with Contextual CNN for Hyperspectral Image Classification
- Python命令行程序项目自动化GUI显示操作神器Gooey实践
- java redis3.0_Java + Redis(第三章)
- 树展示 移动端_企业快速搭建移动BI轻应用,怎么少得了这款BI工具
- python 按从小到大的顺序组合成一个字典_Python 按照某个或某几个字段来排序字典列表...
- FISCO BCOS java sdk 组装交易的代码位置
- 脏写 脏读 不可重复读 幻读 读偏差 写偏差 丢失更新 示例
- 数据结构和算法——树结构(二叉树的创建、查找、遍历和删除)
- 基于SSM的校园帮系统
- C语言冒泡排序三种写法,冒泡排序的三种实现方法