设计师也需要了解的一些前端知识

“

”

国画中有句话， 画虎先画骨 。对应到网页上，视觉效果只是一张皮，前
端代码是支撑这张皮的骨，了解骨架是怎么长的，有助于设计出更合理高
效的页面。
一、常见视觉效果是如何实现的

关于文字效果
文字自身属性相关的效果

css

 

中都是有相对 应的样式的，如字号、行高、

加粗、倾斜、下划线等，但是一些特殊的效果，主要表现为

ps 中图层样式

中的效果，

css 是无能为力的。但是 css

 

也在不断发 展，在

css3 中已经新

增了文字阴影的效果，可惜

IE6、7、8 均不支持。所以，一些比较特殊的文

字效果，依然只能通过图片来实现。
说说文字间距
在

css 中其实是可以控制文字间距的，但是现实中很少会使用，一方面是

很多设计师不知道

css 中有相应的属性，并且需要使用文字间距的场景也

 

不多， 另一方面，浏览器解析文字间距的方式也令这一属性在某些场景
下无法使用，比如在文字居中的时候，实际居中的区域是包含了文字间距

 

的（如上图），使得在视觉 效果上让人无法接受，所在当需要在文字中
保留一定空间的时候（比如两个字的按钮），会直接用空格来代替。
不过多知道一种实现文字间距的方法总是好的，虽然目前来看应用场景很
少，但是也许某天就派上用场了。比如

12 号的雅黑文本看上去会感觉密密

麻麻的，但是加上一点文字间距，阅读效果就会好很多。
关于字体
网页里中文文本字体一般都是宋体，不建议使用其他字体，但是其实字体

 

是可以上传到服务器，然后页面中引用该字体，就解决了用户电脑 上没
有相应字体的问题。不过很少有人会这么做，为什么呢？

1.浏览器是可以

设置忽略网页字体，改用用户设置的字体

(IE:工具->Internet 选项->辅

助功能

)。2.服务器上的字体是需要加载的，而一个字体一般都几兆，严重

影响页面载入速度。所以对于特殊字体，通常都是做成图片。
关于背景
看看通常一个按钮是怎么拼出来。

产品类的按钮我们一般都是像

A 这样设计（中间段是横向的重复图

案），而不是像

B 这样，因为产品类的按钮一般都是复用的，可以用两段

拼出来一个按钮，而

B 这个宽度就限死了。

关于渐变、圆角、投影
在

css3 中终于实现了渐变、圆角和投影，不过可惜的是 IE6、7、8 均不支

 

持，但是已经可以在越来越多的网站中看到 新

css 的应用，尤其是按钮，