[互联网]网页设计师内部培训-02字体与设计.ppt

* * * * * * * * * * * * * * * * 汉真广标也是一种综艺无衬线体， 笔画较粗，连笔较多，并且比综艺体有更多的圆角处理，因此没有综艺体看起来那样机械和庄重，但更显得轻松活泼， 汉真广标用做标题是很醒目的，但同样不适合显示大量小字。 一般来说在同等印刷条件下衬线体在的阅读速度要比无衬线体快五分之一 欧洲人比美国人更喜欢无衬线字体 无衬线字体种类比衬线字体多得多 凡是使用无衬线字体的，必须保证其在正文内容中的可读性。否则，使用衬线字体。 Tips 使用书法字体 * 文字的排版 Layout 改变文字冷冷的老面孔，让它变得有美感，让人亲近。 通过排版和各种图示将文字尽可能直观、有条理地组织起来，使之能更容易、更快速地被人理解。 保证清晰易读 不要使用过多的字体 建立层级次序 让你的版面呼吸 字体与网页设计 Font Web Design Font-Family CSS 字体使用原则 跨浏览器 跨平台 能做到统一 表达准确 达到设计要求 易读 Font-Family CSS 字体使用原则 Font-Family CSS 字体使用原则 最想用的字体 可以代替的相近字体 相近通用字体 font-family: “Times New Roman”, Verdana, Arial, “微软雅黑”,”黑体”; 字体大小单位 CSS 在 CSS 中，最常用的描述字体大小的单位有两个：em 、px 。 通常认为 em 为相对大小单位，px 为绝对大小单位。 但从实际应用中来讲，px 像素其实也是一种相对大小单位。 字体大小单位 CSS px ：像素单位 比如：10px 表示10个像素大小 优点：精准的表达你所设计的大小，不会被其它因素破坏设计结构。 缺点：因为是绝对单位，所以有些早期浏览器的字体放大缩小功能失效。 字体大小单位 CSS em ：相对大小，根据基础字体大小进行相对大小的处理（倍数） 比如：浏览器默认的字体大小为 16px，1em就是 16px大小，2em 就是 32px 大小。 优点：由于它的相对性，所以对跨平台跨设备的字体大小处理上有得天独厚的优势，同时对于响应式的布局设计也有很大的帮助。 缺点：无法直观的看到大小，而且对于不同的大小，你需要精确的计算。 常用属性 CSS font-family ：用于定义字体 font-style ：用于定义字体的样式，包括正常、斜体、倾斜等，对应的属性值为：normal – 文本正常显示、italic – 文本斜体显示、oblique – 文本倾斜显示。 font-weight ：用于定义文字的粗细 font-size ：设置字体大小，不再赘述。 常用属性 CSS line-height ：用于设置文字中的行间距，合适的行间距对用户阅读带来良好体验。同时还可以用于垂直布局单行文字。 letter-spacing ：设置文字之间的字间距，使文字之间的距离增大或者减小。 word-spacing ：用于调整单词的间距。 text-align ：用来对齐文字，例如左对齐、右对齐、居中对齐等。 text-decoration ：用来修饰一段文本，例如添加下划线等。常对 a 标签使用这个属性消除其默认的下划线。 @Font-Face CSS @font-face是CSS3中的一个模块 他主要是把自己定义的Web字体嵌入到你的网页中 @Font-Face CSS @font-face { font-family: SingleMaltaRegular; url(../fonts/singlemalta-webfont.woff) format(woff), url(../fonts/singlemalta-webfont.ttf) format(truetype), font-weight: normal; font-style: normal; } h2.singleMalta { ??font-family: SingleMaltaRegular } Google在线字体服务 /fonts/ 1.在网页头部加入代码 link rel=stylesheet type=text/css href=/css?family=Tangerine 2.在你的CSS样式表中加入 body { font-family: Tangerine, serif; font-size: 48px; } 小结 衬线字体与无衬线字体 每种字体的特点和用法 文字排版让文字更亲切、更易读易懂 如何在网页中准确的使用字体 F