变相怪杰 发表于 2015-1-16 07:38:11

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

缩短改版时间。只要简单的修改几个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下中英文混排是看上往最恬逸的。

你可以轻松地控制页面的布局。

飘飘悠悠 发表于 2015-1-18 06:42:30

在刚开始接触网页的第一堂课上，听说网页制作会是一门很无聊并且很难听懂的过程，而事实却印证了这样一个事实。

若天明 发表于 2015-1-25 22:04:39

不管老师做怎样的解释，而我却对它感到很是吃力，诸如里面有许多不知道的功能。

蒙在股里 发表于 2015-2-4 08:53:57

滚动条)层属性--溢出(visible/hidden/scroll/auto)

灵魂腐蚀 发表于 2015-2-9 20:55:38

使用内容管理系统进行开发并实现快速、精确的浏览器兼容性测试。

小女巫 发表于 2015-2-27 21:44:29

使用所见即所得的接口，亦有HTML编辑的功能。它现在有Mac和Windows系统的版本。原本由Macromedia公司所开发。

山那边是海 发表于 2015-3-9 15:17:26

Adobe Dreamweaver(前称Macromedia Dreamweaver)是Adobe公司的著名网站开发工具。

柔情似水 发表于 2015-3-17 00:25:16

dreamweaver8中文版下载(dw)对专业网页图像设计的FIREWORKS，三者被MACROMEDIA公司称为DREAMTEAM(梦之队)。

爱飞 发表于 2015-3-23 11:34:26

我深感到交流的重要。善于交流的人才是善于学习的人。在整个技术的学习过程中，我总结了四大定律：兴趣、恒心、虚心、时间。
页: [1]
查看完整版本: 带来一篇CSS教程:一切扫瞄器中都能一般显现的字体