尽管网络上有新兴的技术和网络创业公司,但我们最近缺乏的一件事是丰富和漂亮的网页排版.虽然我们有这么多的字体可供选择,但我们只能使用一套特定的常规字体,这些字体被统称为合法的字体.
输入谷歌字体API
谷歌引入了谷歌字体目录而且谷歌字体API这是一种免费的web服务,允许网站所有者以一种简单、方便和资源高效的方式利用网络安全字体之外的其他字体。通过这样做,web开发人员和作者现在可以利用@font-face CSS编码利用谷歌的字体目录和API访问高质量的字体。的谷歌字体API是一个新的条目Font-as-Service小众,包括TypeKit, Typotheque和其他。因此,让我们进一步深入讨论谷歌字体API。
什么是谷歌字体API?
好吧,你经常上网,但你见过网站或博客上使用的非标准字体吗?让我们将非标准字体定义为除Arial、Helvetica、Verdana、Georgia和Times New Roman等web安全字体以外的任何字体。
除了以设计为导向的网站和博客(例如在主流网络上),可能不会有很多。谷歌字体API是一个web服务,它支持高质量的开源字体文件,可以很容易地在您的网页设计中使用。
的字体集合希望能继续发展,让你有能力选择更多类型的字体。
使用谷歌字体API的优点
如果你决定使用谷歌的字体API,这里有一些你可以利用的东西:
坚持使用HTML文本
不同于使用图像或css背景图像替换,使用@font-face
作为一个解决方案,漂亮的网页排版是更多seo友好.此外,这是一种不引人注目的解决方案,这意味着您不需要修改任何现有内容—您只需更新CSS样式表。
网络访问
因为使用的是HTML文本而不是图像或css背景,所以不会影响使用屏幕阅读器的用户。
高运行时间基础设施和减少您的Web服务器的职责
通过offlo//www.psicolabor.com/blog/web-design/website-features-that-you-can-easily-offload/ding your@font-face
需要谷歌的可靠基础设施,您可以放心的事实,服务字体文件将是快速的,您正在减轻您自己的服务器的工作。
如何使用谷歌字体API
你不需要是一个硬核的web开发人员使用谷歌字体API。要使用谷歌Font API,您只需要添加一个样式表链接
元素,然后你就可以开始在你的CSS中使用这种字体。下面是使用谷歌的字体API的一般过程:
步骤1:使用您喜欢的字体添加样式表链接
搜索谷歌的字体集合看看有哪些可用的字体。在你的网站上使用某种字体的基本格式是:
步骤2:使用字体样式你的HTML元素
在下面的例子中,您正在分配您的<标题>
元素,字体命名为字体的名字
使用字体类型
CSS属性。
h1 {Font -family: '字体名称',serif;}
如果只需要使用该字体一次,可以将样式声明为内联样式。
第三步:永远有一个备份计划
您可能已经注意到在上面我使用的代码示例中
衬线
作为备用字体。这样做是为了避免任何意料之外的行为。这意味着如果谷歌的服务器出现任何问题,浏览器可以使用其默认的Serif字体。在使用
字体类型
属性是否正在使用@font-face
或者不是——这种做法被称为字体栈。使用谷歌字体API
举个例子。复制并粘贴以下代码块到HTML文档中,保存它,然后在web浏览器中打开。我建议在不同的浏览器中测试您的HTML文档,以便您可以看到不同浏览器之间的差异(或不足之处)。
您可以尝试使用不同类型的字体,但在本例中,我使用龙虾字体.
href = " http://fonts.googleapis.com/css?family=Lobster ">