网站打开慢,发现前端代码中有谷歌字体
2016-06-27 11:42
197 查看
尽管互联网上新的技术和项目层出不穷,但是在过去的一段时间里我们却缺乏丰富而漂亮的互联网字体。虽然传统的字体选择也非常多,但是大多数电脑中安装并支持的却是一些非常固定的字体,随着互联网设计的发展,传统字体已经不能满足需求。
谷歌字体API的登陆
谷歌引入了谷歌字体目录和字体API,这是一个免费的web服务,它允许站长能够轻松、便捷、有效地使用各种个性化字体。作为字体服务(主要有TypeKit, Typotheque)行业的新生力量,相信大家都很想挖掘谷歌字体API的潜力吧?那么就通过这篇文章深入挖掘它的魅力。
谷歌字体API为何物?
大家都经常上网,你们是否有看到过一些网站或博客上使用的非标准字体呢?所谓非标准字体是指除了互联网安全字体,如Arial, Helvetica, Verdana, Georgia, Times New Roman之外的其他所有字体。
谷歌字体API就是一个支持高质量的开源字体文件的服务,你可以轻而易举地在自己的网站设计中使用这些字体。该字体库还会不断发展,将会有越来越多的字体类型可供你选折。
使用谷歌字体API的好处
可继续使用HTML文本
与使用图片或CSS背景图片不同,使用@font-face方案来美化web排版对 搜索引擎更加友好。
此外,它属于不冒犯性的解决方案,意味着说你不需要对现有的任何内容进行修改,只需要更新 CSS样式即可。
可通过互联网访问
由于你使用 HTML文本而不是一个图片或CSS背景,因此并不影响通过屏幕阅读的用户。
减轻你的服务器负担
使用@font-face字体,你可将服务器负担转到谷歌安全可靠的CDN设备中,减轻了你自己服务器的工作量,而通过谷歌服务器你完全可以不必担心这些字体文件的加载速度。
如何使用谷歌字体API
使用谷歌字体API非常简单,你无需成为一个互联网开发的代码高手。你只需在你的网页中从谷歌那里链接一个CSS式样文件并在自己的CSS定义中引用字体名即可。
下面是使用谷歌字体API的基本过程:
第一步: 添加所需字体的样式链接
你可以查看字体库来查看可用字体。在你的网站上加入某种字体的基本格式是这样的:
第二步: 使用该字体给HTML元素定义式样
下面的例子,是通过使用 font-family CSS属性给《h1》元素分配一个叫做“ Font Name” 的字体。
如果你只需使用该字体一次,你可以使用内联样式:
第三步: 始终有个备份方案
上面的代码你可能也发现了我使用了serif 来作为后备的字体,这样做是为了以防万一。 也就是说万一谷歌的服务器出现什么状况,浏览器将会使用默认的Serif字体。 建议在使用font-family 属性时,无论是否是 @font-face字体,都养成这样的习惯,这通常叫做字体的堆叠。
使用谷歌字体API的例子
接下来我们来介绍一个例子,请复制并粘贴下面的代码到一个HTML文件里并保存,然后通过浏览器打开它。我建议你在不同的浏览器上测试HTML文件可能会发现跨浏览器的差异。这里使用的字体是 Lobster typeface,你可以使用不同的字体来试验。
效果:
上图是谷歌Chrome 4.1浏览器查看的效果截图。
所生成的文本 (“Six Revisions Is Beautiful!”)是普通的 HTML文本,你可以给它添加更多式样元素,(例子中,只使用到 h1元素)。
注:相关网站建设技巧阅读请移步到建站教程频道。
谷歌字体API的登陆
谷歌引入了谷歌字体目录和字体API,这是一个免费的web服务,它允许站长能够轻松、便捷、有效地使用各种个性化字体。作为字体服务(主要有TypeKit, Typotheque)行业的新生力量,相信大家都很想挖掘谷歌字体API的潜力吧?那么就通过这篇文章深入挖掘它的魅力。
谷歌字体API为何物?
大家都经常上网,你们是否有看到过一些网站或博客上使用的非标准字体呢?所谓非标准字体是指除了互联网安全字体,如Arial, Helvetica, Verdana, Georgia, Times New Roman之外的其他所有字体。
谷歌字体API就是一个支持高质量的开源字体文件的服务,你可以轻而易举地在自己的网站设计中使用这些字体。该字体库还会不断发展,将会有越来越多的字体类型可供你选折。
使用谷歌字体API的好处
可继续使用HTML文本
与使用图片或CSS背景图片不同,使用@font-face方案来美化web排版对 搜索引擎更加友好。
此外,它属于不冒犯性的解决方案,意味着说你不需要对现有的任何内容进行修改,只需要更新 CSS样式即可。
可通过互联网访问
由于你使用 HTML文本而不是一个图片或CSS背景,因此并不影响通过屏幕阅读的用户。
减轻你的服务器负担
使用@font-face字体,你可将服务器负担转到谷歌安全可靠的CDN设备中,减轻了你自己服务器的工作量,而通过谷歌服务器你完全可以不必担心这些字体文件的加载速度。
如何使用谷歌字体API
使用谷歌字体API非常简单,你无需成为一个互联网开发的代码高手。你只需在你的网页中从谷歌那里链接一个CSS式样文件并在自己的CSS定义中引用字体名即可。
下面是使用谷歌字体API的基本过程:
第一步: 添加所需字体的样式链接
你可以查看字体库来查看可用字体。在你的网站上加入某种字体的基本格式是这样的:
<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Font+Name"> |
下面的例子,是通过使用 font-family CSS属性给《h1》元素分配一个叫做“ Font Name” 的字体。
h1 { font-family: 'Font Name', serif; } |
<p style="font-family: 'Font Name', serif" >Six Revisions Is Beautiful</p> |
上面的代码你可能也发现了我使用了serif 来作为后备的字体,这样做是为了以防万一。 也就是说万一谷歌的服务器出现什么状况,浏览器将会使用默认的Serif字体。 建议在使用font-family 属性时,无论是否是 @font-face字体,都养成这样的习惯,这通常叫做字体的堆叠。
使用谷歌字体API的例子
接下来我们来介绍一个例子,请复制并粘贴下面的代码到一个HTML文件里并保存,然后通过浏览器打开它。我建议你在不同的浏览器上测试HTML文件可能会发现跨浏览器的差异。这里使用的字体是 Lobster typeface,你可以使用不同的字体来试验。
<html> <head> <link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Lobster"> <style> h1 { font-family: 'Lobster', serif; font-size: 48px; } </style> </head> <body> <h1>Six Revisions Is Beautiful!</h1> </body> </html> |
上图是谷歌Chrome 4.1浏览器查看的效果截图。
所生成的文本 (“Six Revisions Is Beautiful!”)是普通的 HTML文本,你可以给它添加更多式样元素,(例子中,只使用到 h1元素)。
注:相关网站建设技巧阅读请移步到建站教程频道。
相关文章推荐
- jsoup_从网站上爬取图片
- 影响网站流量的10个SEO优化点
- 如何安装配置TuziCMS网站程序模板
- win2003 sp2+iis 6.0上部署.net 2.0和.net 4.0网站的方法
- Ecmall二次开发指南手册,ECMALL模板解析机制.MVC架构分析及文件目录说明.
- 考试网站
- 大型网站架构演化
- Ceph相关博客、网站(256篇OpenStack博客)
- 网站制作行业前景及网站制作人员应具备的素质
- 必选项:你的网站易于阅读吗?
- 1.osframe后台开源框架架构概述
- 浅谈web应用的负载均衡、集群、高可用(HA)解决方案
- 网站常见漏洞攻防进阶
- HA 高可用软件系统保养指南
- HA 高可用软件系统保养指南
- JS在网站中的作用
- 秒杀系统架构优化思路(转)
- 对于大流量网站怎样解决访问量的问题
- 关于网站广告和过滤器的那些事
- 网站架构设计参考(图文)