使用Google Fonts API

寫網頁的時候一般都會避免使用特殊字型,主要是大部分的網路使用者不會有自己在設計網頁時使用的特殊字型,不過google很體貼的幫我們解決這個問題,就是使用google fonts API

首先先看看這個範例:
<html>
<head>
<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Tangerine">
<style>
body {
font-family: 'Tangerine', serif;
font-size: 48px;
}
</style>
</head>
<body>
<h1>Making the Web Beautiful!</h1>
</body>
</html>


簡單的說就是我們使用http://fonts.googleapis.com/css這個網站的css,從中指定字型後,便可在要使用css的網站上寫上font-family去指定字型了。

所以只要這兩個步驟,第一個步驟是呼叫外部css
<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Font+Name">

第二個步驟使用font-family把字型叫出來就好了
CSS selector { font-family: 'Font Name', serif; }
此外也可以使用"|"去一次呼叫很多個字型,而在字型後面加上:i可以把字型設為斜體,加上:b則是設為粗體。

而想知道google提供了哪些字型給使用者,則可以到Google Font Directory去看看。

留言