Fork me on GitHub

Programming Design Notes

Google Font Directory 新功能 - Google Font Previewer

| Comments

Google Font Directory 增了一項新的服務,可以給用戶預覽他的字體,在預覽同時更可以即時去調整字體,系統亦會即時將你的設定轉為 CSS,實在太方便了。這個服務的名稱就是 Google Font Previewer

而可供調整的功能有以下這些:
  • 轉換字體
  • 字體大小
  • 正常,粗體,斜體,粗斜體
  • 陰影
  • 轉為英文大寫,小寫或頭一個字母大寫
  • 加上底線,中線或字的上下都有線
  • 字母間距
  • 每一個英文字的間距
  • 行距

以下是 Google Font Previewer 的樣子:

以下則是我調整後的 CSS:
<link  href="//fonts.googleapis.com/css?family=Lobster:regular" rel="stylesheet" type="text/css" >
<style>
body {
font-family: 'Lobster', serif;
font-size: 40px;
font-style: normal;
font-weight: 700;
text-shadow: 4px 4px 4px #bbb;
text-decoration: none;
text-transform: none;
letter-spacing: 0.012em;
word-spacing: 0.169em;
line-height: 1.54em;
}
</style>



以下是效果:
This is some example text. You can edit it. You can also modify it with the controls on the left. When you’re done simply copy the code for your own site.

Google Font Previewer 網址: http://code.google.com/webfonts/preview

相關書籍: Mining Google Web Services: Building Applications with the Google APIProfessional Web APIs with PHP: eBay, Google, Paypal, Amazon, FedEx plus Web FeedsGoogle Hacks: Tips & Tools for Finding and Using the World's Information