Stri

首页 > HTML/CSS > 关于”字体”的一些事儿

关于”字体”的一些事儿

2010年6月6日木小乐发表评论阅读评论

才学疏浅.理解有限- -!!.
看过好多朋友写的页面的字体.大多数都用”宋体”,或者为了兼容强一点.加个Arial(Arial在win平台上和Mac的都有)
会这样写

1	font-family:Simsun,Arial;

按W3c的某种意义上.上面这段CSS应该再加个通用字体放在尾部.一般会用sans-serif(无衬线字体)

1	font-family:Simsun,Arial,sans-serif;

关于serif与sans-serif.
大概上可以这样讲:前者适宜可内容字体.因为它的字形有衬线.长时间看并不感觉累(宋体就是serif字体).后者,适宜做页面突出,小字号时更明显点.
总结：

<!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> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>页面字体调查</title> <style type="text/css"> * { padding:0; margin:0; } li { list-style:none; } .test-box { width:90%; margin:100px auto; } .test-tabl { border-collapse: collapse; font:14px/2 Simsun, Arial, sans-serif; } .test-tabl td, .test-tabl th { border:1px solid #D5D5D5; padding:2px; } .test-tabl tr:first-child th, .test-tabl tr td:first-child { background-color:#f7f7f7; } .test-tabl td { font-size:14px; text-align:center; font-family:Tahoma, Arial, sans-serif; } .test-tabl caption { color:#000; text-align:left; font:bold 20px/35px Tahoma, arial, sans-serif; } .test-simsun td { font-family:Simsun; } </style> </head> <body> <div class="test-box"> <table width="100%" border="0" cellspacing="0" cellpadding="0" class="test-tabl"> <caption> 各浏览器默认字体 </caption> <tr> <th width="6%">名称</th> <th width="10%">版本</th> <th width="11%">默认字体</th> <th width="16%">默认英文</th> <th width="22%">默认中文</th> <th width="23%">默认数字</th> </tr> <tr> <td>IE</td> <td>ie6.ie7,ie8</td> <td>Times New Roman</td> <td style="font-family:'Times New Roman';">http://striblog.com/</td> <td style="font-family:'Times New Roman';">就能发“短消息”</td> <td style="font-family:'Times New Roman';">123456789.0</td> </tr> <tr> <td>fireFox</td> <td>3.64</td> <td>sans-serif</td> <td style="font-family:sans-serif;">http://striblog.com/</td> <td style="font-family:sans-serif;">就能发“短消息”</td> <td style="font-family:sans-serif;">123456789.0</td> </tr> <tr> <td>Chrome</td> <td>6</td> <td>Simsun</td> <td style="font-family:Simsun;">http://striblog.com/</td> <td style="font-family:Simsun;">就能发“短消息”</td> <td style="font-family:Simsun;">123456789.0</td> </tr> <tr> <td>opera</td> <td>10.6</td> <td>宋体</td> <td style="font-family:'宋体';">http://striblog.com/</td> <td style="font-family:'宋体';">就能发“短消息”</td> <td style="font-family:'宋体';">123456789.0</td> </tr> </table> <table width="100%" border="0" cellspacing="0" cellpadding="0" class="test-tabl"> <caption> 各大网站页面字体 </caption> <tr> <th width="7%">页面</th> <th width="12%">页面类别</th> <th width="20%">Body/Html</th> <th width="20%">页面内容标题</th> <th width="21%">页面内容</th> <th width="20%">备注</th> </tr> <tr> <td>QQ</td> <td>新闻内容</td> <td>12px/1.75 "宋体",arial,sans-serif</td> <td>800 26px/30px "宋体",arial</td> <td>14px/1.75 "宋体",arial,sans-serif</td> <td> </td> </tr> <tr> <td>163</td> <td>新闻内容</td> <td>12px/22px 宋体,serif</td> <td>24px 宋体,serif</td> <td>14px/23px 宋体,serif</td> <td> </td> </tr> <tr> <td>sina</td> <td>新闻内容</td> <td>无</td> <td>20px/35px "黑体"</td> <td>14px/23px</td> <td> </td> </tr> <tr> <td>Q-Zone</td> <td>博文页面</td> <td>Arial,Simsun,"Arial Unicode MS",Mingliu,Helvetica</td> <td>18px/24px Simsun;</td> <td> </td> <td> </td> </tr> </table> <table width="100%" border="0" cellspacing="0" cellpadding="0" class="test-tabl test-simsun"> <caption> lang对字体的影响 </caption> <tr> <th width="7%">lang</th> <th width="12%">IE</th> <th width="20%">FF</th> <th width="20%">Chrome</th> <th width="21%">opera</th> <th width="20%">备注</th> </tr> <tr lang="en-us"> <td>en-us</td> <td style="font-family:'Times New Roman';">QQ</td> <td style="font-family:sans-serif;">QQ</td> <td style="font-family:\5b8b\5f43;">QQ</td> <td style="font-family:\5b8b\5f43;">QQ</td> <td>注意FF渲染的</td> </tr> <tr lang="zh-cn"> <td>zh-cn</td> <td style="font-family:'Times New Roman';">QQ</td> <td style="font-family:sans-serif;">QQ</td> <td style="font-family:Simsun;">QQ</td> <td style="font-family:\5b8b\5f43;">QQ</td> <td> </td> </tr> </table> </div> </body> </html>

提示：你可以先修改部分代码再运行。

分类: HTML/CSS 标签:

评论 (0) Trackbacks (0) 发表评论 Trackback

本文目前尚无任何评论.

本文目前尚无任何 trackbacks 和 pingbacks.

lang=”gb2312″是错误的. 查询数据库里的一段数据

关于”字体”的一些事儿

分类目录

近期文章

近期评论

Categories

Blogroll

文章归档

功能

稀饭滴