首页 > 经验 > 关键词 > 网站设计最新资讯 > 正文

谷歌字体API使用教程

2010-06-04 08:55 · 稿源:Wordpress.la

尽管互联网上新的技术和项目层出不穷,但是在过去的一段时间里我们却缺乏丰富而漂亮的互联网字体。虽然传统的字体选择也非常多,但是大多数电脑中安装并支持的却是一些非常固定的字体,随着互联网设计的发展,传统字体已经不能满足需求。

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

第二步: 使用该字体给HTML元素定义式样

下面的例子,是通过使用 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元素)。

  • 相关推荐
  • 大家在看
  • 还在为字体版权发愁?字体超市:一个超良心的商用字体平台

    近几年不管是设计公司、自媒体还是个人网店,字体侵权问题屡见不鲜。仅以“微软雅黑”为例,百度搜索出来的相关侵权信息就多达 38100 条结果。2007 年 8 月,北大方正状告美国暴雪娱乐有限公司,称其侵犯方正兰亭字库中方正北纬楷书、方正剪纸等 5 款方正字体的著作权,索赔4. 08 亿元。2008 年,北大方状告广州宝洁有限公司,称“飘柔”字体涉侵权索赔 134 万元。2012 年,热门影片《失恋 33 天》,因片头字幕、短信字幕等使用了?

  • 「字体超市」强势上线:一站式解决字体使用问题!

    字体超市(Font.cn)提供的正版字体授权,可用于社交媒体、/H5、VI、排版阅读、印刷品/包装、海报企宣、视频影视、游戏、广告和电商等领域。一站式解决字体使用问题,帮你甄别可商用授权字体,无版权担忧。

  • 担心字体侵权?「字体超市」帮你轻松解决用字问题

    无论是做各种各样的商业海报,还是上传到自媒体平台的各种宣传图,想要让内容更加的美观和更具可读性,都离不开选择特别的字体。让人头疼的是,一旦涉及“商业用途”,很多字体在未经授权的情况是不能随便使用的,如果不慎违反了使用许可,就会面临被追责、巨额罚款等各种风险。

  • 字体超市: 享受正版高性价比字体福利,再无侵权风险

    ​做设计离不开字体,但使用字体的时候,千万要留心字体的版权问题。 无论是做各种各样的商业海报,还是上传到自媒体平台的各种宣传图,一旦涉及“商业用途”,很多字体在未经授权的情况下,是不能随便乱用的。

  • 正规授权字体平台哪家强?字体超市解决你的后顾之忧

    在平时的工作中,常常会涉及文字编辑,利用不同的字体,可提升阅读和欣赏体验,恰当的运用字体,可以为设计方案锦上添花。但是,你知道吗,许多字体也是有著作权的哦,未经许可使用或传播,也可能构成侵权的。

  • 高盛发布免费新字体 但禁止使用者批评高盛

    据外媒报道,投资银行高盛日前发布了自己的字体,一套低调的无衬线字体,称为高盛体。而在协议中,高盛表示,只要用户不批评高盛,就可以随意使用该字体。只需要下载字体包,就表示您同意了

  • 携手京东 汉仪字库推出全新字体解决方案

    随着电商节日的来临,汉仪字库与京东集团达成战略合作:汉仪字库为京东集团提供全新的正版字体服务,双方携手共建互联网健康版权生态。 如何规范平台商家使用版权字体一直是京东以及各大电商平台较为突出的问题。 2017 年,汉仪字库牵手京东集团,发布国内首个电商平台字库产品,字体版权成本得到了大幅度的降低,但是电商平台商家出现的版权问题仍然层出不穷,除了版权价格,对字体素材的甄别和确权也是商家面临的最大问题。 为了

  • 携手京东素材中心 汉仪字库推出全新字体解决方案

    2020年6月8日,汉仪字库与京东集团达成战略合作:透过京东版权素材中心,向京东数十万商家和京东平台达人提供全新的正版字体服务。字体服务不仅包含了上百款主流设计字体在京东生态圈的商业使用,更透过基于人工智能的字体识别技术,协助商家管理和监控素材版权,规避盗版风险。在知识产权意识和保护日益提升的今天,汉仪字库与京东集团携手共建健康的字体版权平台生态。平台商家版权意识缺乏,素材版权识别能力较差导致的盗版行为

  • 出于隐私考虑:苹果拒绝在Safari部署16个Web API

    据外媒报道,苹果本周表示,它拒绝在Safari浏览器上实施 16 项新网络技术(Web API),因为这些技术为用户指纹识别开辟了新途径从而对他们的隐私构成威胁。这 16 项技术具体如下:

  • AppsFlyer 发布 Zero 套餐,为企业提供终身免费的营销工具与API

    Zero 套餐是 AppsFlyer 零预算营销计划的一部分,通过整合产品与工具,为开发者、营销人员与产品经理揭示核心自有渠道的潜在价值 2020 年 6 月11 日, 北京 ,今天,全球归因领导者 AppsFlyer 宣布推出终身免费套餐 Zero,该套餐是 AppsFlyer 近期推出的零预算营销计划(Zero Budget Marketing Initiative)的一部分。这一计划旨在为移动应用开发者、营销人员和产品经理免费提供领先的营销工具与 API,赋能增长,并最大限度发掘企业

  • 京东上线业内首个大型免费版权素材库:含上亿张图片和主流字体

    数据显示,电商平台线上图片的日增量超过一亿张。一个普通商家一年至少使用几百张图片和数十款字体,每年需承担的成本至少上千元。除了经济成本,商家在使用素材时还需注意法律风险。为了让平

  • OPPO 加入 OpenChain,与谷歌微软共建开源许可标准

    据外媒彭博新闻社 10 日报道,2020 年 5 月 27 日,OPPO 正式成为内地首家OpenChain 白金会员,与谷歌、微软、ARM等行业领军企业一起,参与开源许可标准的制定,共建更加健康的全球开源体系。 OpenChain 作为 Linux 基金会下的项目,旨在制定开源软件供应链标准,帮助各种组织更高效地解决开源许可证一致性地问题。通过 OpenChain 认证后,开源许可流程将更为轻松。目前 ARM、微软、谷歌、高通等各领域巨头纷纷加入 OpenChain,为

  • 苹果拒绝在Safari部署16个Web API 避免对用户隐私构成威胁

    苹果本周表示,它拒绝在Safari浏览器上实施 16 项新网络技术(Web API),因为这些技术为用户指纹识别开辟了新途径,对用户的隐私构成威胁。

  • 华为HMS Core自有COVID-19联系人追踪API曝光

    ​谷歌和苹果已经发布了 COVID-19 联系人追踪 API,但依然有数百万不使用 Google Play Services 的用户无法参与该计划,其中就包括国内手机厂商华为。援引外媒 XDA-Developers 报道,华为在对 HMS Core 的更新中引入了自家的联系人追踪 API。

  • SAP咨询顾问的三项能力标准

    SAP顾问的三项能力标准,是贾奋明先生在 2008 年为国家电网培养首批内部顾问的时候提出的一种人才能力标准,是对作为技术+管理的信息化人才能力的全面概括。SAP咨询顾问作为ERP顾问的一个类别,首先要具备ERP顾问的通用能力和特质,其次,因为实施SAP的客户都是大中型企业,甚至很多是世界 500 强的企业,所以SAP咨询顾问比传统ERP顾问更要具备企业管理咨询的能力,达到一定的管理咨询高度,才能在企业的信息化项目中,带来业务流?

  • 分享一款新浪短链接在线生成器-新浪短网址api接口平台

    在分享链接的时候,如果链接很长的话,很容易导致链接复制不完整,从而链接打不开,而且长链接因为太长,会给人一种不那么安全可靠的感觉,在点击量上就会大大减少。为什么要生成新浪短链接?1.短信,微博营销因为在短信和新浪微博等平台中,字符数量有限制,如果使用长链接会占用大量字符,使得文本缩水。而短链接就可以节省大量的字符空间,保证了大量的字符空间供文本发挥。天才牛短网址提供的新浪t.cn短链都最大限度的缩短了链?

  • 谷歌删除了25个窃取Facebook证书恶意安卓应用

    本月,谷歌应用商店已经删除了 25 个窃取Facebook证书的Android应用程序,这些应用下载量总计超过了 234 万次。据悉,这些恶意程序是由同一个威胁组织开发的,尽管提供不同的功能,但它们的工作原理是一样的。

  • 苹果联合谷歌亚马逊制定智能家居标准 生态将更重视隐私

    北京时间6月23日凌晨,苹果首次在线上举办全球开发者大会WWDC20。在本次大会上,苹果会照例对iOS、iPadOS、macOS、watchOS、tvOS进行更新,从每年WWDC的软件蓝图中,开发者和用户都能大致看到苹果未来产品的走向与大致定位,从今年的新iPad Pro定位直指电脑不难发现,苹果也势必会将旗下诸多OS做进一步融合。隐私一直是苹果特别重视的部分,在今年的WWDC上,苹果特意将这个部分单独拿出来讲述,在今年隐?

  • 苹果、Facebook、谷歌和亚马逊CEO同意出席反垄断听证会

    美国四大科技巨头亚马逊、苹果、Facebook和谷歌的首席执行官们都同意在众议院反垄断小组委员会作证。

  • 继谷歌,Facebook承诺提供2亿美元资金支持黑人企业

    继谷歌承诺向黑人企业提供1. 75 亿美元资金并提高黑人领导比例之后,Facebook于美国当地时间周四宣布,将向黑人拥有的企业和组织投入 2 亿美元。

  • 参与评论
文明上网理性发言,请遵守新闻评论服务协议

热文

  • 3 天
  • 7天