枫芸志 » CSS http://witmax.cn 记录成长路途上的点滴总结 Sat, 04 Feb 2012 13:47:44 +0000 en hourly 1 http://wordpress.org/?v=3.3.1 【CSS】左侧定宽、右侧宽度自适应布局 http://witmax.cn/css-layout-1.html http://witmax.cn/css-layout-1.html#comments Sun, 05 Jun 2011 06:36:58 +0000 晴枫 http://witmax.cn/?p=1606 又是一道前端的面试题，请实现页面布局，包括页头、内容区域、页脚三部分，其中内容区域为左右分栏，左栏定宽200px、右栏自适应宽度。

虽然是以前应用中碰到过的布局，但现场还是没写对，来重新做一下。

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

知其然知其所以然，简单分析一下。页头、内容区域、页脚三块划分没什么好说的，主要是左右分栏。为保证右侧div能撑满右侧，需要设width:100%；左右的div需要在同一行上，而右侧div已经撑满一行了，于是左侧div的做法就是从文档流中分离，设置position:absolute；此时左右两个div发生重叠，需要将右侧div内容宽度减少200px并相应右移，给左侧div留出空间，设定main的padding-left:200px; 发现左侧div的内容也向右偏移了200px，需要左移回去，所以设置left:0。这样布局就完成了。

以上是中间区域双栏实现，现在改成左中右三栏的样式，代码如下：

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

]]> http://witmax.cn/css-layout-1.html/feed 4 Web前端开发笔试题集锦（HTML/CSS篇） http://witmax.cn/web-dev-test-html.html http://witmax.cn/web-dev-test-html.html#comments Sun, 08 May 2011 12:17:35 +0000 晴枫 http://witmax.cn/?p=1593 以下为Web前端开发笔试题集锦之HTML/CSS篇，移步Javascript篇

1，让一个input的背景颜色变成红色

<input type="text" style="background:red;"/>

2，div的高宽等于浏览器可见区域的高宽，浏览器滚动，div始终覆盖浏览器的整个可见区域

思路：

(1)先放置一个div1，浮动：position:absolute;top:0px;left:0px;

(2)再放置一个div2，浮动：position:absolute;top:0px;left:0px;width:100%;height:100%;

(3)在div2中放置一个div3，令其高度超过浏览器高度，使div2产生滚动条

(4)对html,body进行样式设置：width:100%;height:100%;overflow:hidden->不让浏览器产生滚动条，避免页面出现两个滚动条

(5)编写JavaScript，另div2的高度等于页面可见高度，宽度等于页面可见宽度，注意，在计算完可见高度height和可见宽度width后，要对这两个值做处理，可见宽度-div2的滚动条的宽度，滚动条的宽度我这里假设是20px

这样题目基本就完成了，不过浏览器的兼容性还不是很好。

贴出代码：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "<a href="http://www.w3.org/TR/html4/loose.dtd%22">http://www.w3.org/TR/html4/loose.dtd"</a>>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>前端试题(html3/4)</title>
<style type="text/css">
   html, body {height:100%;width:100%;margin:0;overflow:hidden;}
   #fullDiv {width:100%;height:100%;top:0px;left:0px;position:absolute;background:#eee;border:1px solid red;}
   #body {width:100%;height:100%;overflow:auto;z-index:999;position:absolute;top:0px;left:0px;}
</style>
</head>
<body>
<input type="background:red;position:absolute;left:100px;"></input>
<!--div的高宽等于浏览器可见区域的高宽，浏览器滚动，div始终覆盖浏览器的整个可见区域-->
<!--input type="text" style="background:red;"/-->
<div id="fullDiv"></div>
<div id="body">
<div style="height:1000px;border:1px solid black;background:#ee0;position:absolute;"></div>
</div>
<script type="text/javascript">
   function getBrowerSize() {
      if(document.compatMode == "BackCompat"){
         cWidth = document.body.scrollWidth;
         cHeight = document.body.scrollHeight;
      }
      else {
         cWidth = document.documentElement.scrollWidth;
         cHeight = document.documentElement.scrollHeight;
      }
      return {width:(cWidth-21)+"px", height:(cHeight - 4)+"px"};
   }
   var floatDiv = document.getElementById('fullDiv');
   var size = getBrowerSize();
   alert("width:"+size.width+" height:"+size.height);
   floatDiv.style.height = size.height;
   floatDiv.style.width = size.width;
</script>
</body>
</html>

3，IE、FF下面CSS的解释区别

（1） 让页面元素居中

ff{margin-left:0px;margin-right:0px;width:***}

ie上面的设置+text-align:center

（2） ff：不支持滤镜

ie：支持滤镜

（3） ff：支持!important

ie支持*，ie6支持_

（4） min-width,min-height

FF支持，IE不支持，IE可以用css expression来替代

（5） Css Expression

FF不支持，IE支持

（6） cursor：hand

IE下可以显示手指状，FF下不行

（7） UL的默认padding和margin

IE下ul默认有margin，FF下ul默认有padding

（8） FORM的默认margin

IE下FORM有默认margin，FF下margin默认为0

4，一个定宽元素在浏览器（IE6，IE7，Firefox）中横向居中对齐的布局，请写出主要的HTML标签及CSS

思路：

IE6/7：text-align:center

Firefox：margin:0 auto(margin-top和margin-bottom也可以为其他数字，关键是margin-left,margin-right为auto)

贴出代码：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "<a href="http://www.w3.org/TR/html4/loose.dtd">http://www.w3.org/TR/html4/loose.dtd</a>">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<title>让页面元素居中（兼容各个浏览器）</title>
<style>
html,body{width:100%;height:100%;margin:0px;padding:0px;}
.centerAlign {margin-left:auto;margin-right:auto;text-align:center;width:400px;height:100px;border:1px solid red;}
</style>
</head>
<body>
<div>this div will be centerd!</div>
</body>
</html>

5，CSS中margin和padding的区别

margin是元素的外边框，是元素边框和相邻元素的距离

Padding是元素的内边框，是元素边框和子元素的距离

6，最后一个问题是，如何制作一个combo选项，就是可以输入可以下拉菜单选择。

思路：

（1）布局select和input，让input覆盖select，除了select的下拉图标，以方便select选择

（2）编写JS，为select添加onchange事件，onchange时将input的value置成select选中的指

贴出代码

<HTML>
<HEAD>
<META http-equiv='Content-Type' content='text/html; charset=utf-8'>
<TITLE>可输入的下拉框</TITLE>
<style type="text/css">
    .container {position:relative;margin:10px;}
    .container .sel {width:120px;}
    .container .input {width:100px;height:20px;position:absolute;}
</style>
</HEAD>
<BODY>
<div>
    <input type="text" id="input"></input>
    <select id="sel">
        <option value="选项1">选项1</option>
        <option value="选项2">选项2</option>
        <option value="选项3">选项3</option>
        <option value="选项4">选项4</option>
    </select>

</div>
<script type="text/javascript">
    var sel = document.getElementById("sel");
    var input = document.getElementById("input");
    sel.onchange = function() {
        input.value = this.value;
    }
</script>
</BODY></HTML>

7，<img>中alt和tittle的区别

alt：图片显示不出来了就提示alt

title：鼠标划过图片显示的提示

8，用css、html编写一个两列布局的网页，要求右侧宽度为200px，左侧自动扩展。

<!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=gb2312" />
<title>双列布局，右侧定宽</title>
<style>
   html,body{width:100%;height:100%;margin:0px;padding:0px;}
   #left {background:#F00; width:100%;position:absolute;padding-right:-200px;}
   #right {background:#0F0; width:200px;position:absolute;right:0px;}
</style>
</head>
<body>
   <div id="left"></div>
   <div id="right"></div>
</body>
</html>

9，解释document.getElementById(“ElementID”).style.fontSize=”1.5em”

em是相对长度单位，相当于当前对象内文本的字体尺寸，如果当前行内文本的字体尺寸未被指定，则相对于浏览器的默认字体尺寸。

该语句将id为ElementID的元素的字体设置为当前对象内文本的字体尺寸的1.5倍

10，Doctype? 严格模式与混杂模式-如何触发这两种模式，区分它们有何意义? 行内元素有哪些？块级元素有哪些？CSS的盒模型？

DOCTYPE是文档类型，用来说明使用的HTML或者XHTML是什么版本，其中的DTD叫文档类型定义，里面包含了文档规则，浏览器根据定义的DTD来解析页面的标识并展现出来

DOCTYPE有两种用途：一个可以进行页面的有效性验证，另一个可以区分浏览器使用严格模式还是混杂模式来解析CSS。

严格模式和混杂模式是浏览器解析CSS的两种模式，目前使用的大部分浏览器对这两种模式都支持，但是IE5只支持混杂模式。

可那个过DOCTYPE声明来判断哪种模式被触发

（1） 没有DOCTYPE声明的网页采用混杂模式解析

（2） 对使用DOCTYPE声明的网页视不同浏览器进行解析

（3） 对于浏览器不能识别的DOCTYPE声明，浏览器采用严格模式解析

（4） 在ie6下，如果在DOCTYPE声明之前有一个xml声明比如

<?xml version=”1.0” encoding=”utf-8”?>，采用混杂模式解析，在IE7，IE8中这条规则不生效。

(5) 在ie下，如果DOCTYPE之前有任何字符，都会导致它进入混杂模式，如：

<!-- STATUS OK -->

区分这两种模式可以理解浏览器解析CSS的区别，主要是在盒模式的解释上。


常见的块级元素有：DIV,FORM,TABLE,P,PRE,H1~H6,DL,OL,UL等

常见的内联元素：SPAN,A,STRONG,EM,LABEL,INPUT,SELECT,TEXTAREA,IMG,BR等
CSS盒模型用于描述为一个HTML元素形成的矩形盒子，盒模型还涉及元素的外边距，内边距，边框和内容，具体来讲最里面的内容是元素内容，直接包围元素内容的是内边距，包围内边距的是边框，包围边框的是外边距。内边距，外边距，边框默认为0。

11，CSS引入的方式有哪些? link和@import的区别?

引入css的方式有下面四种

（1） 使用style属性

（2） 使用style标签

（3） 使用link标签

（4） 使用@import引入

Link和@import区别：

（1） link属于XHTML标签，@import是CSS提供的一种方式。Link除了加载CSS外，还可以做很多事情，如定义RSS，rel连接属性等；@import只能加载CSS

（2） 加载顺序不同，当页面被加载的时候，link加载的CSS随之加载，而@import引用的CSS会等到页面完全下载完之后才会加载

（3） 兼容性差别，由于@import是CSS2.1提出的，所以老的浏览器不支持，IE系列的浏览器IE5以上才能识别，而link没有这个问题

使用DOM控制样式的差别，使用JavaScript控制DOM去改变样式的时候，只能操作link，@import不可以被DOM操作。

12，如何居中一个浮动元素?

一个浮动元素里面包含的元素可以水平居中，原理如下：

让浮动元素left相对于父元素container右移50%，浮动元素left的子元素left-child相对于left左移50%就可以实现left-child相对于container水平居中

垂直居中类似，不过操作的不是left而是top

贴出代码：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<title>让浮动元素居中</title>
<style>
html,body {width:100%;height:100%;margin:0px;padding:0px;overflow:hidden;}
.container {width:100%;height:100%;position:relative;}
.left {width:400px;height:400px;background:#00F;float:left;position:relative;left:50%;top:50%;}
.left div {position:relative;left:-50%;top:-50%;background:#F00;width:100%;height:100%;}
.clear {clear:both;}
</style>
</head>
<body>
<div>
<div><div>这是一个浮动的元素</div></div>
<div></div>
</div>
</body>
</html>

13，HTML5和CSS3的了解情况

有所了解

HTML5和CSS3分别是新推出的HTML和CSS规范，前世是XHTML2和CSS2，目前还在草案阶段，不过得到了Apple，Opera，Mozilla，Google，Microsoft不同程度的支持，也开发出了不少基于他们的应用。

HTML5相对于原来的HTML规范有一些变化：

（1）DOCTYPE更简洁

（2）新增了一些语义化标签，如article,header,footer,dialog等

（3）新增了一些高级标签，如<vedio>,<audio>,<canvas>

CSS3相对于CSS2也新增了不少功能

（1） 选择器更加丰富

（2） 支持为元素设置阴影

（3） 无需图片能提供圆角

14，你怎么来实现下面这个设计图

（1） 切图

（2） 布局，采用两栏布局，分别左浮动

（3） 编写css代码

贴出代码：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "<a href="http://www.w3.org/TR/html4/loose.dtd">http://www.w3.org/TR/html4/loose.dtd</a>">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<title>品致页面制作</title>
<style>
html,body {width:100%;height:100%;margin:0px;padding:0px;overflow:hidden;}
ul,li,span,div,img{padding:0px;margin:0px;}
li {list-style:none;margin:0px;padding:0px;}
.wrapper {}
.fl {float:left;}
.nav {width:90px;}
.article {width:270px;padding-left:10px;padding-top:8px;}
.title {font-size:12px;color:#3366cc;margin:8px 0px;}
.title span {margin:0px 2px;}
.btn {background:url(img/btn.jpg) no-repeat;width:61px;height:17px;display:block;}
.article-list {font-size:12px;zoom:1;}
.article-list li.tip{background:url(img/title-bg.jpg) 0px 3px no-repeat ;padding-left:15px;list-style:none;color:#000;}
.article-list li.separator{background:url(img/separator.jpg) no-repeat;width:250px;height:3px;margin:4px 0px;display:block;_margin:0px;line-height:3px;_background:url(img/separator.jpg) 0px 5px no-repeat;}
.clear {clear:both;overflow:hidden;height:0px;}
</style>
</head>
<body>
   <div>
      <div>
         <div>
            <img src="img/logo.jpg" alt="logo"/>
         </div>
         <div align="center">
            <span>品&bull;致</span>
            <span>第11期</span>
         </div>
         <div align="center">
            <span></span>
         </div>
      </div>
      <div>
         <ul>
            <li>老虎伍兹为何被女人“吃掉”？</li>
            <li></li>
            <li>你必须告诉一声的九件事</li>
            <li></li>
            <li>男人，被时尚抛弃的一群？</li>
            <li></li>
            <li>30天牛奶养生让你焕发青春肌肤</li>
            <li></li>
            <li>你是否曾经关注过你的心脏？</li>
            <li></li>
         </ul>
      </div>
      <div></div>
   </div>
</body>
</html>

15，css 中id和class如何定义,哪个定义的优先级别高?

id：#***，***为HTML中定义的id属性

class:.***，***为HTML中定义的class属性

id比class的优先级高

16，用html实现如下表格(不如嵌套实用表格)

三行三列,其中第一行第一列和第二行第一列合并; 第二行第二列和第二行第三列合并(现场画表)

使用表格嵌套，源码如下：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "<a href="http://www.w3.org/TR/html4/loose.dtd">http://www.w3.org/TR/html4/loose.dtd</a>">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<title>品致页面制作</title>
</head>
<body>
   <table cellspacing="0" cellpadding="0" border="1" style="width:500px;text-align:center;">
      <tr>
         <td width="33%">1</td>
         <td colspan="2">
               <table cellspacing="0" cellpadding="0" style="width:100%;text-align:center;" border="1">
                  <tr>
                     <td width="55%">2</td>
                     <td>3</td>
                  </tr>
                  <tr>
                     <td colspan="2">4</td>
                  </tr>
               </table>
         </td>
      </tr>
      <tr>
         <td width="33%">5</td>
         <td width="33%">6</td>
         <td>7</td>
      </tr>
   </table>
</body>
</html>

运行结果如下：

17，web标准网站有那些优点

（1） Web标准网站结构和布局分离，使网站的访问和维护更加容易

（2） Web标准网站结构，布局以及页面访问都标准化，使网站能在更多的web标准设备中访问，兼容性更好

（3） Web标准网站语义化更好，语义化的XHTML不仅对用户友好，对搜索引擎也友好。

来源：http://www.xuchen.name/2010/10/18/HTML,CSS,笔试题.html 修改了个别错误

]]> http://witmax.cn/web-dev-test-html.html/feed 3 【CSS】组装图标 http://witmax.cn/css-assembled-icon.html http://witmax.cn/css-assembled-icon.html#comments Fri, 12 Feb 2010 12:34:37 +0000 晴枫 http://witmax.cn/?p=707 一般情况下，图标总是事先做成图片然后直接拿来调用就行了。但是碰到一个状况需要做3分比例饼图，采用3种颜色标识不同内容在总体所占的比例，简单起见，所占比例为1/8的倍数。效果如下：

组装图标效果

这样把每一个比例单独做个图，未免工作量过大，没算错的话需要做45个图；当然你可能会想到用程序去生成图，但也要会图像编程才行，这里先不考虑。

我的方法是把图分解，做一张灰圆，然后分别做8个不同8分比例的浅蓝、深蓝扇形，这个做起来还是比较方便的。做好后利用雪碧工具把图拼合成一张，如下：

原始图标

利用gif图片的透明性进行CSS组装，如下

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

源码下载：CSS拼装图标源码

参考文章： Tencent ISD Webteam《由黄钻等级图标处理引发的思考》

]]> http://witmax.cn/css-assembled-icon.html/feed 0 【CSS】用css控制cellspacing、cellpadding分析 http://witmax.cn/css-control-cellspacing-cellpadding.html http://witmax.cn/css-control-cellspacing-cellpadding.html#comments Sun, 20 Dec 2009 16:09:36 +0000 晴枫 http://witmax.cn/?p=607 默认情况下，table单元格之间是有间隔的。一般情况下，我们会利用table的cellpadding和cellpadding来清除默认样式，如下：

<table cellspacing="0" cellpadding="0"></table>

但这样做不仅增加了代码的体积，而且也极其不符合样式与内容分离的web标准，因此使用css控制cellspacing/cellpadding便有其意义。

先说结论，采用以下两行样式即可：

table{border-collapse:collapse;}
th,td{padding:0;}

th, td{padding:0;}效果等同于cellpadding=”0″。

table {border-collapse:collapse;}效果类似cellspacing=”0″。为何是类似呢？因为前者是连同边框border一同去掉了，可参见下面的例子。与cellspacing=”0″等同的应该是table{border-spacing:0;}，但是IE6不支持，所以还是用border-collapse。

做了一个测试页面，直观看效果可能更容易理解：

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

以下是border-collapse属性和border-spacing属性介绍，至于padding属性同其他的盒状模型。

border-collapse属性

用法：设置或检索表格的行和单元格的边是合并在一起还是按照标准的HTML样式分开。

默认值： separate
继承性： yes
版本： CSS2
JavaScript 语法： object.style.borderCollapse=”collapse”

浏览器支持：所有主流浏览器都支持 border-collapse 属性。说明：任何的版本的 Internet Explorer （包括 IE8）都不支持属性值 “inherit”。

值 描述
separate 默认值。边框会被分开。不会忽略 border-spacing 和 empty-cells 属性。
collapse 如果可能，边框会合并为一个单一的边框。会忽略 border-spacing 和 empty-cells 属性。
inherit 规定应该从父元素继承 border-collapse 属性的值。

border-spacing 属性

用法：设置相邻单元格的边框间的距离（仅用于“边框分离”模式）。 该属性指定分隔边框模型中单元格边界之间的距离。在指定的两个长度值中，第一个是水平间隔，第二个是垂直间隔。除非 border-collapse 被设置为 separate，否则将忽略这个属性。尽管这个属性只应用于表，不过它可以由表中的所有元素继承。

默认值： not specified
继承性： yes
版本： CSS2
JavaScript 语法： object.style.borderSpacing=”15px”

浏览器支持：所有主流浏览器除了IE6都支持 border-spacing 属性。

值 描述
length length 规定相邻单元的边框之间的距离。使用 px、cm 等单位。不允许使用负值。如果定义一个 length 参数，那么定义的是水平和垂直间距。如果定义两个 length 参数，那么第一个设置水平间距，而第二个设置垂直间距。
inherit 规定应该从父元素继承 border-spacing 属性的值。

更多关于CSS样式属性的解释提供 CSS样式表手册 供大家参考。

]]> http://witmax.cn/css-control-cellspacing-cellpadding.html/feed 0 【CSS】设置div的最小高度（多浏览器兼容） http://witmax.cn/css-min-height.html http://witmax.cn/css-min-height.html#comments Fri, 11 Dec 2009 14:47:45 +0000 晴枫 http://witmax.cn/?p=598 网页布局中会碰到需要某一个div有最小高度，超过最小高度后会自动扩展。比如某个div是有背景图的，高度小了背景图就不完整了影响效果。需要用到css中的min-height属性。

min-height属性的使用说明：

设置或检索对象的最小高度。如果此属性的值大于 max-height 属性的值，将会被自动转设为 max-height 属性的值。在IE6中这个属性仅仅作用于固定布局的表格内的 td 对象， th 对象， tr 对象。表格的默认布局是自动计算的，要得到固定布局的表格，设置表格的 table-layout 属性的值为 fixed 。固定布局的算法比默认的自动算法要快很多。此属性对于 currentStyle 对象而言是只读的。对于其他对象而言是可读写的。 对应的脚本特性为 minHeight 。

最简单的是采用以下css样式：

min-height:100px;
height:auto !important;
height:100px;

本来单用min-height就可以高度了，可是可恶的IE6不支持，于是加了后面两行来修正。

上完整的测试代码：

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

以上代码在IE6/IE7/IE8/Firefox/Opera/Chrome/Safari下测试有效。

]]> http://witmax.cn/css-min-height.html/feed 0 【CSS】设置选中文字的颜色和背景色 http://witmax.cn/css-text-selection.html http://witmax.cn/css-text-selection.html#comments Sun, 06 Dec 2009 10:55:46 +0000 晴枫 http://witmax.cn/?p=592 在网页上选中一段文字，选中的文字默认情况下是以蓝色背景+ 白色文字来显示的。看过一些网站，修改了选中文字的背景色，感觉十分清新，今天来查了一下怎么实现的。

上DEMO：

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

相关CSS样式如下：

::selection {
 background:#cc00cc;
 color:#fff;
}
::-moz-selection{
 background:#cc00cc;
 color:#fff;
}
code::selection {
 background: #666666;
}
code::-moz-selection {
 background: #666666;
}

做几点说明：

  1. Firefox使用::-moz-selection私有选择符来实现，不支持::selection选择符
  2. Chrome、Safari、Opera均使用::selection选择符
  3. IE系列不支持选中文本样式
  4. 选中文本样式只支持文本颜色color和背景颜色background属性

选中文字样式DEMO在Firfox 3.5、Opera 9.64、Chrome 3、Safari 4上测试有效，IE下无效。

]]> http://witmax.cn/css-text-selection.html/feed 0 TypeTester：在线字体效果对比生成工具 http://witmax.cn/typetester.html http://witmax.cn/typetester.html#comments Thu, 05 Nov 2009 04:37:44 +0000 晴枫 http://witmax.cn/?p=550 设计选择字体时往往希望直接对比不同的字体效果来确定哪个字体更合适，而TypeTester就是这样的一个工具，而且能同时生成CSS样式。

TypeTester功能特色：

  • 支持中文字体
  • 三列效果样式、12种字体样式，方便对比效果
  • 允许设置字体、字号、间距、颜色、背景、位置等属性
  • 能生成CSS样式
  • 操作便捷，使用方便

界面如下：

TypeTester界面

TypeTester界面

通过设置获得理想的字体效果后，点击Tools中的Get CSS For后的链接，可获取设置的CSS样式，如下图：

TypeTester生成CSS样式

TypeTester生成CSS样式

复制其中的CSS内容放到自己的CSS样式里即可。

TypeTester网址：http://www.typetester.org/

over :-)

]]> http://witmax.cn/typetester.html/feed 2