Google Fonts API在线网页字体使用介绍
如需帮忙改代码,或者WordPress二次开发、PHP网站建设等需求,可联系我购买付费服务: 点此联系我
近日Google公布了Google Fonts API,只需在你的网页代码中添加一个<link>链接到Google字体库,就可以使用一系列自定义的字体,并且不需要你的用户预装这些字体。这些字体存储在Google的服务器,当然可以给我们节省一些流量,Google的链接速度那也是没得说的。另外可以毫不夸张地说,你可以在20秒内将这些字体应用到你的项目中。因为是在后端处理,所以这些字体能够支持到Internet Explorer 6,不必太在意浏览器兼容问题。目前Google Fonts API的字体数量还不是很多,并且都是英文字体,不过相信这个字体库会不断扩充的。闲话少说,下面演示一些如何使用这个API。
只需很简单的几步!
首先到Google Font Directory寻找你中意的字体
点击相应的字体,进入字体介绍页面:
通过点击"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这个字体了,下面是以上代码的显示结果:
本文翻译自:
-- 完 --
本文采用 「CC BY-NC-SA 4.0」创作共享协议,转载请标注以下信息:
原文出处:露兜即刻 https://www.ludou.org/google-fonts-api.html
官方的教程很详细的!!
@Hiro 所以文章末尾提供了官方的参考资料。
有中文的字体吗?
@周震宇 如果你认真看了文章,应该注意到第一步的:
"首先到Google Font Directory寻找你中意的字体"
这里有中文字体吗?自己看看!
链接是404页面
nuxt 中无效