Google Fonts API在线网页字体使用介绍

日期: 标签:Web字体网页设计
如需帮忙改代码,或者WordPress二次开发、PHP网站建设等需求,可联系我购买付费服务:  点此联系我

     近日Google公布了Google Fonts API,只需在你的网页代码中添加一个<link>链接到Google字体库,就可以使用一系列自定义的字体,并且不需要你的用户预装这些字体。这些字体存储在Google的服务器,当然可以给我们节省一些流量,Google的链接速度那也是没得说的。另外可以毫不夸张地说,你可以在20秒内将这些字体应用到你的项目中。因为是在后端处理,所以这些字体能够支持到Internet Explorer 6,不必太在意浏览器兼容问题。目前Google Fonts API的字体数量还不是很多,并且都是英文字体,不过相信这个字体库会不断扩充的。闲话少说,下面演示一些如何使用这个API。

 

只需很简单的几步!


首先到Google Font Directory寻找你中意的字体

Google Font Directory

点击相应的字体,进入字体介绍页面:

Yanone+Kaffeesatz

     通过点击"Get the code"按钮可以得到该字体的使用方法。我们就用以上字体做个演示:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8">
<title>Google Fonts API</title>
<link href="http://fonts.googleapis.com/css?family=Yanone+Kaffeesatz" rel="stylesheet" type="text/css">
<style type="text/css">
<!--
body { 
font-family: "Yanone Kaffeesatz", serif; font-size: 100px; 
}
-->
</style>
</head>
<body>
Hello World
</body>
</html>

     就这么简单,只需链接到http://fonts.googleapis.com/css?family=Yanone+Kaffeesatz,font-family加上"Yanone Kaffeesatz",就可以使用Yanone+Kaffeesatz这个字体了,下面是以上代码的显示结果:

Google Font Directory Sample

 

本文翻译自:

-- 完 --

本文采用 「CC BY-NC-SA 4.0」创作共享协议,转载请标注以下信息:
原文出处:露兜即刻 https://www.ludou.org/google-fonts-api.html
露兜
kaapass@outlook.com  QQ 825533758

业余编程爱好者。

6 条留言

点此留言
  1. Hiro Hiro

    官方的教程很详细的!!

    • Ludou

      @Hiro 所以文章末尾提供了官方的参考资料。

  2. 周震宇 周震宇

    有中文的字体吗?

    • Ludou

      @周震宇 如果你认真看了文章,应该注意到第一步的:
      "首先到Google Font Directory寻找你中意的字体"

      这里有中文字体吗?自己看看!

  3. 天下第一帅 天下第一帅

    链接是404页面

  4. 阿西吧噶

    nuxt 中无效

发表留言