谷歌字体API指南

WebFX总裁。Bill在互联网营销行业有超过25年的经验,擅长SEO, UX,信息架构,营销自动化等。William在希彭斯堡和麻省理工学院的科学计算和教育背景为MarketingCloudFX和WebFX的其他关键研发项目提供了基础。

font-typography尽管网络上有新兴的技术和网络创业公司,但我们最近缺乏的一件事是丰富和漂亮的网页排版.虽然我们有这么多的字体可供选择,但我们只能使用一套特定的常规字体,这些字体被统称为合法的字体

输入谷歌字体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 ">