而可供調整的功能有以下這些:
- 轉換字體
- 字體大小
- 正常,粗體,斜體,粗斜體
- 陰影
- 轉為英文大寫,小寫或頭一個字母大寫
- 加上底線,中線或字的上下都有線
- 字母間距
- 每一個英文字的間距
- 行距
以下是 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
相關書籍: