设为首页收藏本站
开启辅助访问 切换到窄版

仓酷云

 找回密码
 立即注册
搜索
热搜: 活动 交友 discuz
仓酷云»社区 › 软件教程 Design › Dreamweav(DW) › 带来一篇CSS教程:一切扫瞄器中都能一般显现的字体 ...
返回列表 发新帖
查看: 719|回复: 8
打印 上一主题 下一主题

[DIV+CSS] 带来一篇CSS教程:一切扫瞄器中都能一般显现的字体

[复制链接]
变相怪杰 该用户已被删除
跳转到指定楼层
楼主
发表于 2015-1-16 07:38:11 | 显示全部楼层 回帖奖励 |倒序浏览 |阅读模式

马上注册，结交更多好友，享用更多功能，让你轻松玩转社区。

您需要 登录 才可以下载或查看，没有帐号？立即注册

x
缩短改版时间。只要简单的修改几个CSS文件就可以重新设计一个有成百上千页面的站点。
破洛洛文章简介：所谓平安字体，就是在一切的扫瞄器中都能一般显现的字体，也就是一切操纵体系默许都安装了的字体。
很信服外洋一些前端开辟职员看待学问的研讨精力，他们很擅长总结发明。看到一篇关于平安字体ListofWebSafeFonts的文章，内里总结了一切的平安字体的款式，固然都是英文的。

所谓平安字体，就是在一切的扫瞄器中都能一般显现的字体，也就是一切操纵体系默许都安装了的字体。
共有21种平安字体：

font-family:Arial,Helvetica,sans-serif;
font-family:ArialBlack,Gadget,sans-serif;
font-family:BookmanOldStyle,serif;
font-family:ComicSansMS,cursive;
font-family:Courier,monospace;
font-family:CourierNew,Courier,monospace;
font-family:Garamond,serif;
font-family:Georgia,serif;
font-family:Impact,Charcoal,sans-serif;
font-family:LucidaConsole,Monaco,monospace;
font-family:LucidaSansUnicode,LucidaGrande,sans-serif;
font-family:MSSansSerif,Geneva,sans-serif;
font-family:MSSerif,NewYork,sans-serif;
font-family:PalatinoLinotype,BookAntiqua,Palatino,serif;
font-family:Symbol,sans-serif;
font-family:Tahoma,Geneva,sans-serif;
font-family:TimesNewRoman,Times,serif;
font-family:TrebuchetMS,Helvetica,sans-serif;
font-family:Verdana,Geneva,sans-serif;
font-family:Webdings,sans-serif;
font-family:Wingdings,ZapfDingbats,sans-serif;

我们用一个页面抽象的展现出来：


<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<metahttp-equiv="Content-Type"content="text/html;charset=gb2312"/>
<title>平安字体</title>
<styletype="text/css">
<!--
*{font-size:12px}
div{padding:5px0;border-bottom:1pxsolid#ccc}
P{margin:3px0}
.font_arial{font-family:Arial,Helvetica,sans-serif}
.font_arialblack{font-family:ArialBlack,Gadget,sans-serif;}
.font_bookman{font-family:BookmanOldStyle,serif;}
.font_comic{font-family:ComicSansMS,cursive;}
.font_courier{font-family:Courier,monospace;}
.font_couriernew{font-family:CourierNew,Courier,monospace;}
.font_garamond{font-family:Garamond,serif;}
.font_georgia{font-family:Georgia,serif;}
.font_impact{font-family:Impact,Charcoal,sans-serif;}
.font_lucida_c{font-family:LucidaConsole,Monaco,monospace;}
.font_lucida_s{font-family:LucidaSansUnicode,LucidaGrande,sans-serif;}
.font_mssans{font-family:MSSansSerif,Geneva,sans-serif;}
.font_msserif{font-family:MSSerif,NewYork,sans-serif;}
.font_palatino{font-family:PalatinoLinotype,BookAntiqua,Palatino,serif;}
.font_symbol{font-family:Symbol,sans-serif;}
.font_tahoma{font-family:Tahoma,Geneva,sans-serif;}
.font_times{font-family:TimesNewRoman,Times,serif;}
.font_trebuchet{font-family:TrebuchetMS,Helvetica,sans-serif;}
.font_verdana{font-family:Verdana,Geneva,sans-serif;}
.font_webdings{font-family:Webdings,sans-serif;}
.font_wingdings{font-family:Wingdings,ZapfDingbats,sans-serif;}
-->
</style>
</head>
<body>
<divclass="font_arial">
<p>这是字体：font-family:Arial,Helvetica,sans-serif</p>
<p>中文和英文混排test</p>
<p>ABCDEFGHIJKLMNOPQRSTUVWXYZ</p>
<p>abcdefghijklmnopqrstuvwxyz</p>
<p>0123456789</p>
</div>
<divclass="font_arialblack">
<p>这是字体：font-family:ArialBlack,Gadget,sans-serif</p>
<p>中文和英文混排test</p>
<p>ABCDEFGHIJKLMNOPQRSTUVWXYZ</p>
<p>abcdefghijklmnopqrstuvwxyz</p>
<p>0123456789</p>
</div>
<divclass="font_bookman">
<p>这是字体：font-family:BookmanOldStyle,serif</p>
<p>中文和英文混排test</p>
<p>ABCDEFGHIJKLMNOPQRSTUVWXYZ</p>
<p>abcdefghijklmnopqrstuvwxyz</p>
<p>0123456789</p>
</div>
<divclass="font_comic">
<p>这是字体：font-family:ComicSansMS,cursive</p>
<p>中文和英文混排test</p>
<p>ABCDEFGHIJKLMNOPQRSTUVWXYZ</p>
<p>abcdefghijklmnopqrstuvwxyz</p>
<p>0123456789</p>
</div>
<divclass="font_courier">
<p>这是字体：font-family:Courier,monospace</p>
<p>中文和英文混排test</p>
<p>ABCDEFGHIJKLMNOPQRSTUVWXYZ</p>
<p>abcdefghijklmnopqrstuvwxyz</p>
<p>0123456789</p>
</div>
<divclass="font_couriernew">
<p>这是字体：font-family:CourierNew,Courier,monospace</p>
<p>中文和英文混排test</p>
<p>ABCDEFGHIJKLMNOPQRSTUVWXYZ</p>
<p>abcdefghijklmnopqrstuvwxyz</p>
<p>0123456789</p>
</div>
<divclass="font_garamond">
<p>这是字体：font-family:Garamond,serif</p>
<p>中文和英文混排test</p>
<p>ABCDEFGHIJKLMNOPQRSTUVWXYZ</p>
<p>abcdefghijklmnopqrstuvwxyz</p>
<p>0123456789</p>
</div>
<divclass="font_georgia">
<p>这是字体：font-family:Georgia,serif</p>
<p>中文和英文混排test</p>
<p>ABCDEFGHIJKLMNOPQRSTUVWXYZ</p>
<p>abcdefghijklmnopqrstuvwxyz</p>
<p>0123456789</p>
</div>
<divclass="font_impact">
<p>这是字体：font-family:Impact,Charcoal,sans-serif</p>
<p>中文和英文混排test</p>
<p>ABCDEFGHIJKLMNOPQRSTUVWXYZ</p>
<p>abcdefghijklmnopqrstuvwxyz</p>
<p>0123456789</p>
</div>
<divclass="font_lucida_c">
<p>这是字体：font-family:LucidaConsole,Monaco,monospace</p>
<p>中文和英文混排test</p>
<p>ABCDEFGHIJKLMNOPQRSTUVWXYZ</p>
<p>abcdefghijklmnopqrstuvwxyz</p>
<p>0123456789</p>
</div>
<divclass="font_lucida_s">
<p>这是字体：font-family:LucidaSansUnicode,LucidaGrande,sans-serif</p>
<p>中文和英文混排test</p>
<p>ABCDEFGHIJKLMNOPQRSTUVWXYZ</p>
<p>abcdefghijklmnopqrstuvwxyz</p>
</div>
<divclass="font_mssans">
<p>这是字体：font-family:MSSansSerif,Geneva,sans-serif</p>
<p>中文和英文混排test</p>
<p>ABCDEFGHIJKLMNOPQRSTUVWXYZ</p>
<p>abcdefghijklmnopqrstuvwxyz</p>
<p>0123456789</p>
</div>
<divclass="font_msserif">
<p>这是字体：font-family:MSSerif,NewYork,sans-serif</p>
<p>中文和英文混排test</p>
<p>ABCDEFGHIJKLMNOPQRSTUVWXYZ</p>
<p>abcdefghijklmnopqrstuvwxyz</p>
<p>0123456789</p>
</div>
<divclass="font_palatino">
<p>这是字体：font-family:PalatinoLinotype,BookAntiqua,Palatino,serif</p>
<p>中文和英文混排test</p>
<p>ABCDEFGHIJKLMNOPQRSTUVWXYZ</p>
<p>abcdefghijklmnopqrstuvwxyz</p>
<p>0123456789</p>
</div>
<divclass="font_symbol">
<p>这是字体：font-family:Symbol,sans-serif</p>
<p>中文和英文混排test</p>
<p>ABCDEFGHIJKLMNOPQRSTUVWXYZ</p>
<p>abcdefghijklmnopqrstuvwxyz</p>
<p>0123456789</p>
</div>
<divclass="font_tahoma">
<p>这是字体：font-family:Tahoma,Geneva,sans-serif</p>
<p>中文和英文混排test</p>
<p>ABCDEFGHIJKLMNOPQRSTUVWXYZ</p>
<p>abcdefghijklmnopqrstuvwxyz</p>
<p>0123456789</p>
</div>
<divclass="font_times">
<p>这是字体：font-family:TimesNewRoman,Times,serif</p>
<p>中文和英文混排test</p>
<p>ABCDEFGHIJKLMNOPQRSTUVWXYZ</p>
<p>abcdefghijklmnopqrstuvwxyz</p>
<p>0123456789</p>
</div>
<divclass="font_trebuchet">
<p>这是字体：font-family:TrebuchetMS,Helvetica,sans-seriff</p>
<p>中文和英文混排test</p>
<p>ABCDEFGHIJKLMNOPQRSTUVWXYZ</p>
<p>abcdefghijklmnopqrstuvwxyz</p>
<p>0123456789</p>
</div>
<divclass="font_verdana">
<p>这是字体：font-family:Verdana,Geneva,sans-serif</p>
<p>中文和英文混排test</p>
<p>ABCDEFGHIJKLMNOPQRSTUVWXYZ</p>
<p>abcdefghijklmnopqrstuvwxyz</p>
<p>0123456789</p>
</div>
<divclass="font_webdings">
<p>这是字体：<br/>
font-family:Webdings,sans-serif</p>
<p>中文和英文混排test</p>
<p>ABCDEFGHIJKLMNOPQRSTUVWXYZ</p>
<p>abcdefghijklmnopqrstuvwxyz</p>
<p>0123456789</p>
</div>
<divclass="font_wingdings">
<p>这是字体：<br/>
font-family:Wingdings,ZapfDingbats,sans-serif</p>
<p>中文和英文混排test</p>
<p>ABCDEFGHIJKLMNOPQRSTUVWXYZ</p>
<p>abcdefghijklmnopqrstuvwxyz</p>
<p>0123456789</p>
</div>
</body>
</html>

IE7下截图：
















之前经常在懊恼中英文混排的成绩，英笔墨体一样平常都是选用亚洲字体大概Verdana字体，可在和中文混排的时分都不是很幻想，偶尔看到一篇淘宝兄弟的blog，他倡议用Tahoma字体，并且发明淘宝网很快的改用了这类字体。从我下面的截图也能够看出，Tahoma字体在12px下中英文混排是看上往最恬逸的。

你可以轻松地控制页面的布局。
浏览器, cursive, 操作系统, Black, Style

相关帖子
回复

使用道具 举报

返回列表 发新帖
高级模式
B Color Image Link Quote Code Smilies
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

QQ|Archiver|手机版|仓酷云 鄂ICP备14007578号-2

GMT+8, 2024-5-16 11:41

Powered by Discuz! X3.2

© 2001-2013 Comsenz Inc.

快速回复 返回顶部 返回列表