2011
Nov
02
列出一些网页可以使用的字型,大家设计网页时,可以参考一下罗。
先介绍一下设定字体的 css style 语法,「font-family」这个属性就是代表字体样式。
Example
- <span style="font-family:Arial;"> font letters </span>
- /*或是使用*/
- <style>
- .font{
- font-family:Arial;
- }
- </style>
预设中文字体
细明体 | 文字有比较好看吗? |
新细明体 | 文字有比较好看吗? |
标楷体 | 文字有比较好看吗? |
预设英文字体
Arial | www.yahoo.com | |
Arial Black | www.yahoo.com | |
Comic Sans MS | www.yahoo.com | |
Courier | www.yahoo.com www.google.com.tw |
字母的宽度一样长 |
Courier New | www.yahoo.com www.google.com.tw |
字母的宽度一样长 |
Fixedsys | www.yahoo.com www.google.com.tw |
|
Georgia | www.yahoo.com www.google.com.tw |
|
Impact | www.yahoo.com www.google.com.tw |
|
Lucida Console | www.yahoo.com www.google.com.tw |
字母的宽度一样长 |
Lucida Sans Unicode | www.yahoo.com www.google.com.tw |
|
Marlett | www.yahoo.com www.google.c |
|
Microsoft Sans Serif | www.yahoo.com www.google.com.tw |
|
Modern | www.yahoo.com www.google.com.tw |
|
MS Sans Serif | www.yahoo.com www.google.com.tw |
|
MS Serif | www.yahoo.com www.google.com.tw |
|
Palatrino Lintype | www.yahoo.com www.google.com.tw |
|
Roman | www.yahoo.com www.google.com.tw |
|
Script | www.yahoo.com www.google.com.tw |
字型 = Script |
Small Font | www.yahoo.com www.google.com.tw |
|
Symbol | www.yahoo.com www.google.com.tw |
|
System | www.yahoo.com www.google.com.tw |
|
Tahoma | www.yahoo.com www.google.com.tw |
|
Terminal | www.yahoo.com www.google.com.tw |
|
Times New Roman | www.yahoo.com | |
Trebuchet MS | www.yahoo.com www.google.com.tw |
|
verdana | www.yahoo.com www.google.com.tw |
自订字体
部分浏览器提供自定义的字体,不过 user 必须先从网路上下载回来,如果是使用中文字体的话,一个字体档就要10MB左右,光是下载时间就太久了,所以还是用用英文字体就好。
支援的浏览器有 Firfox ,Chrome
不支援的浏览器有 IE
特殊字体「abcdefghi」,Firefox才看得到喔
Example
- <style>
- @font-face{
- font-family:"AGENT ORANGE";
- src: url(AGENTORANGE.TTF);
- }
- body{
- font-family:AGENT ORANGE;
- }
- </style>
Web fonts
如果你想用一些特别的英文字体,可以到 https://fonts.google.com/ 这个网站找找看,找到你要的字体后,使用他非常的简单,只要 link 到 fonts.google 的字型档 CSS ,就能够使用罗。
Example
- <link rel="stylesheet" type="text/css"
- href="https://fonts.googleapis.com/css?family=Jacques+Francois+Shadow">
- <style>
- body{
- font-family: 'Jacques Francois Shadow';
- font-size: 18px;
- }
- </style>
" Jacques Francois Shadow" 字型范例如下:
Jacques+Francois+Shadow