2011
Nov
02

网页好读版

列出一些网页可以使用的字型,大家设计网页时,可以参考一下罗。

先介绍一下设定字体的 css style 语法,「font-family」这个属性就是代表字体样式。

Example
  1. <span style="font-family:Arial;"> font letters </span>
  2. /*或是使用*/
  3. <style>
  4. .font{
  5. font-family:Arial;
  6. }
  7. </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
  1. <style>
  2. @font-face{
  3. font-family:"AGENT ORANGE";
  4. src: url(AGENTORANGE.TTF);
  5.  
  6. }
  7. body{
  8. font-family:AGENT ORANGE;
  9. }
  10. </style>

Web fonts

如果你想用一些特别的英文字体,可以到 https://fonts.google.com/ 这个网站找找看,找到你要的字体后,使用他非常的简单,只要 link 到 fonts.google 的字型档 CSS ,就能够使用罗。

Example
  1. <link rel="stylesheet" type="text/css"
  2. href="https://fonts.googleapis.com/css?family=Jacques+Francois+Shadow">
  3.  
  4. <style>
  5. body{
  6. font-family: 'Jacques Francois Shadow';
  7. font-size: 18px;
  8. }
  9. </style>

" Jacques Francois Shadow" 字型范例如下:

Jacques+Francois+Shadow

网页好读版