网页设计稿中特殊字体的处理技巧

网页设计稿中特殊字体的处理

网页设计稿中特殊字体的处理：网页浏览者在看网页时使用自己电脑上的字库来显示字体的，如果在制作网页时用了特殊的字体，必须保证浏览网页的用户的电脑上也有这样的字库才能看到相同的效果，如果用户的电脑上没有所定义的字体，那么它会自动用系统默认字体来显示，一般中文的默认字体都是宋体。

特殊字体只能做成图片。

CSS中常用的字体包括：宋体、黑体、微软雅黑、Arial、verdana、serif。

5、切图时应该保存成那种图片格式

1)JPG不适用于所含颜色很少、具有大块颜色相近的区域或亮度差异十分明显的较简单的图片。对于写实的摄影图片或是颜色层次非常丰富的图像采用JPG的图片格式保存一般能达到最佳的压缩效果。根据经验，在页面中使用的商品图片、采用人像或者实物素材制作的广告banner等图像更适合采用JPG的图片格式保存。

2)对于需要高保真的较复杂的图像，PNG虽然能无损压缩，但图片文件较大，不适合应用在Web页面上。图像上颜色较少，并且主要以纯色或者平滑的渐变色进行填充。或者具备较大亮度差异以及强烈对比的简单图像适合使用PNG格式进行存储。

3)PNG8支持1为布尔透明通道，所谓布尔透明值得是要么完全透明要么完全不透明。而PNG24则支持8为的Alpha通道透明，也就是说可以存储从完全透明到完全不透明一共256个层级的透明度。

4)对于小图标或小动画，可以保存成gif格式。

6、制作中需要注意的问题——z-index属性

1、z-index属性设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面

2、该属性设置一个定位元素沿z轴的位置，z轴定义为垂直延伸到显示区的轴。如果为正数，则离用户更近，为负数则表示离用户更远。

7、兼容问题的技巧

1)写DTD声明

2)为网页样式引入CSS重置代码，重置各浏览器默认属性值。

3)同时为一个元素写float和margin-left或margin-right时，同时设置display：inline，为解决IE6双边距问题。

4)给元素设置高度后，同时设置overflow：hedden，避免在IE6中高度继续扩展的问题

5)对于文本，在使用margin-left、padding-left、margin-top、padding-top之前有限考虑是否可用text-indent和line-height代替，因为计算尺寸的代价相对来说要大些。