[Tool]想要有漂亮的字型嗎？讓Google Font API幫幫你

2010-07-07

13267
0
Google

今天在RSS上看到這篇分享：Easy Custom Web Typography with Google Fonts API

看了一下覺得真是讚，跟大家share一下，你希望可以隨意的幫自己網頁上的文字替換字型嗎？像這樣：

要設定字型我們知道可以透過CSS的font屬性，不過我們總是怎麼設定就只有那幾種常用的，若要擴充字型，好像又不太知道該從何下手，這邊看Google Font API提供給我們一些很棒的字型，讓我們可以輕易的在網頁上使用諸多字型，如：

好了，接下來講如何使用吧，們先連到Google Font API的首頁：http://code.google.com/intl/zh-TW/apis/webfonts/
然後點選Google font directory：

進來後可以看到目前支援的字型，大約有20種字型，找到我們想要使用的字型：

例如今天我有興趣的字型是Tangerine，移到上頭，點選右上角的Click to embed Tangerine：

接著會進入這個畫面，這邊共有五個頁籤，你可以分別看到不同大小字體、粗體或斜體、字型對照表、描述還有最後如何使用這個字型：

前面不贅述，直接點進Get the code吧，點進來後可以看到這個簡單的畫面，給你一串CSS reference URL還有需要的CSS Style：

馬上來試試：


<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <link href=' http://fonts.googleapis.com/css?family=Tangerine:regular,bold' rel='stylesheet' type='text/css'>
    <style type="text/css">
        h1 { font-family: 'Tangerine', arial, serif; 
             size: 60; 
           }
    </style>
</head>
<body>
    <form id="form1" runat="server">
    
    <h1>Hello World</h1>
    
</form>
</body>
</html>

出來的效果像這樣子，非常漂亮阿：

目前這還不支援在Mobile上面使用，而且這只是beta版本，期待他正式版快點出來吧。

參考資料：
Easy Custom Web Typography with Google Fonts API
Google Font API

游舒帆 (gipi)

探索原力Co-founder，曾任TutorABC協理與鼎新電腦總監，並曾獲選兩屆微軟最有價值專家 ( MVP )，離開職場後創辦探索原力，致力於協助青少年培養面對未來的能力。認為教育與組織育才其實息息相關，都是在為未來儲備能量，2018年起成立為期一年的專題課程《職涯躍升的關鍵24堂課》，為培養台灣未來的領袖而努力。

回首頁