网页设计中字体默认样式详解.
网页设计 中字体默认样式详解 , 从事过网页设计的朋友都知道,我们使用的有些字体在一些 浏览器 里面显示不出来, 不是我们想要的那种效果, 我们应该怎么办呢?下面就给大家做一 个详细的介绍,希望大家通过下面的介多了解一点知识
浏览器默认的样式往往在不同的浏览器、 不同的语言版本甚至不同的 系统 版本都有不同的设 置,这就导致如 果直接利用默认样式的页面在各个浏览器下显示非常不一致,于是就有了 类似 YUI 的 reset 之类用来尽量重写浏览器的默认设置保证各个浏览器样式一致性的做法。
拿字体来说, 各个浏览器默认的字体种类、 字体大小和字体行高都不一样, 比如 IE8的中文 版在 Windows XP下显示网页时默认字体是宋体,而英文版肯定不会如此。所以我们需要 统一设置默认的字体样式,以便实现一致的显示效果来保证设计的一致性和提高开发效率。
样式优先级
通常用户看到的页面的样式会受到三层控制 :
初中教师述职报告* 第一层是浏览器的默认样式
* 第二层是网页定义样式
* 第三层是用户自定义样式
和 CSS 一样, 后面的优先级 高于前面的, 也就是说网页定义样式可以覆盖浏览器的默认样 式,而用户自定义样式优先级最高。 不过,当有 !important 时, 网页样式可以覆盖用户自定 义样式。用户 !important > 网页 !important > 用户 > 网页 > 浏览器默认。
字体:arial
我们页面的绝大部分内容字符都是中文, 毫无疑问目前为止在网页上最常用也是最通用的显 示中文的字体是宋体,但是宋体在显示英文、数字和英文符号时过于糟糕,比如 ©字符,所 以我们一般期望通过 CSS 来实现用更好的字体样式来显示它们,然后用宋体来显示中文和
中文符号。之所以选择 arial 是因为:
1. Windows和 都预装了这款字体,应该是使用最广泛的网页字体了。它的潜在对手 tahoma 和 helvetica 就没有这么幸运了。
学生会自我介绍
2. 视觉设计的专业人士可能会认为在 Windows 中使用 tahoma 、 在 Mac 中使用 helvetica
口组词
更好, 比如淘宝的默认字体样式是 font: 12px/1 Tahoma, Helvetica, Arial, "\5b8b\4f53", san s-serif;
这是一个很不错的选择,但是你也会发现 Google 、 YAHOO 、 Youtube 、 Bing 甚至 MS N 的新版都使用 arial 作为第一默认字体。 所以从美观和可读性上来讲 arial 应该是完全可以 接受的。
3. 一般情况下设置 font-family 都会在最后设置通用字体族以保证其 性,比如 Google 的设置为 font-family:arial,sans-serif;,但是至少在非中文版的 Win7下当编码是 GBK 时, I E8会因 sans-serif 来渲染宋体,导致字体出现变形,这就是为什么淘宝需要在 sans-serif 前加上宋体而 Google 无需这样做的原因。
4. 因为中文字体的选择非常有限,所以目前所有的主流浏览器都设置使用宋体来显示中 文。 Baidu 的首页和搜索结果页使用 font-family:arial;可以从侧面说明这样做的安全性。可 能有人注意到 Firefox 中国版默认显示的中文字体是微软雅黑,这是因为谋智 网络 擅自修改 了用户自定义样式, 不允许网页的样式覆盖浏览器设置的样式。 也是由于类似的情况, 我们 要弹性设计网页非常重要。
使用英文字体作为第一默认字体会导致的问题之一就是中英文以及符号混排时的对齐问题、 通过设置行高和 hasLayout 能解决绝大部分情况,但是都不会很完美,如果把字体改成 “ 宋 体 ” 能彻底的解决问题。很明显,这个问题只出现在 IE 上。所以,如果你的网站很少使用英 文、数字和英文符号,那么直接设置 {font-family:\5b8b\4f53;}也是很合理的选择。
大小:12px
1. 12px是宋体能显示的极限,虽然微软雅黑能显示更小的字体,但目前的应用环境尚未 成熟。由于宋体基本上是目前显示中文唯一的通用 Web 字体,所以 12px 成为最常用的字
体大小。我们当然可以依据产品的需要来修改这个默认值。
2. 不用考虑基于字体大小(em 的设计。
3. 在 Chrome3.0之后的中文版中,字体大小最小值是 12px ,比如你设置最小字体为 10p x ,最后也变成 12px 。
行高:1.5倍
1. 这是一个经验值, 不同的产品对这个值要求可能不同, 但我们一般会设置最常用的为默 认值。比如 YUI 的 font 中是 font:13px/1.231 arial,helvetica,clean,sans-serif;即字体大小默 认值是 13px ,行高是 13*1.231=16.003px,默认的行高是默认字体的 1.231倍。对于中文 来说,常用的字体大小 12px 、 14px 、 16px 、 18px 等偶数大小,在 IE6和 IE7设置其行高 也为偶数能解决一些特殊情况下的字体对其问题。
2. 在 IE6和 IE7中,行高值必须大于字体的 2px 才能保证字体的完整显示或当其作为链 接时能有效显示下划线。
3. 设置 line-height 时,注意不要使用单位(包括 %在内,因为子节点会继承经过运算后 的 line-height 值,所以当使用单位后浏览器会把 line-height 计算成第一次定义的绝对值, 而不会随着字体大小的变化而变化,而无单位的数值表示是所在容器的 font-size 的倍数, 所以设置为无单位的数值是最佳选择。
4. 深入 CSS 行高非常有利于理解 line-height ,值得一读。
性能和效率
北京五一期间严格进返京管理1. 大部分平台都有 arial ,减少浏览器的查时间。
2. 代码最少,书写方便。 arial 基本上是名字最短的字体了,可以节约 CSS 的大小。
3. 所有的字母都小写,目前 Google 就是这样做的,好处是既可以编写更快也能提升 Gzi p 压缩 的效率。
我读书我快乐征文4. 中文最好用 unicode 表示, 比如使用宋体是 {font-family:\5b8b\4f53;}, 使用微软雅黑是 {f ont-family:\5fae\8f6f\96c5\9ed1;},这样的好处是避免编码问题,同时能得到所有的主流浏 览器的支持。
5. 使用正确的字体种类写法,避免使用引号,这样可以缩小 CSS 的大小。中文字体可以 按上一条方式来编写。
未来苏泊尔维修点
1. 通过对中英文及符号混排的测试, 我发现微软雅黑其实表现相当不错,包括英文数字 和英文字符以及在 IE6和 IE7的显示效果上, 但唯一的遗憾是在 XP 下如果安装了微软雅黑 字体
的用户没有打 开 “ 使用屏幕字体的边缘平滑 ” 选项的话,在 firefox 、 Safari 和 Opera 、特 别是 IE6下会非常模糊难以辨认。针对这个问题目前并没有很好的 解决方案,所以只有等 到 IE6使用比率非常小的时候才可能正式的使用它。 或许需要到 2014年, XP 死掉的时候。
2. 虽然很早就有了 @font-face, 但是浏览器的支持、 网速和商业问题, 导致它很少被应用。 最近关于字体的好消息是 Firefox3.6将支持 Web Open Font Forma。 关于 Web 字体未来的 相关信息可以看 Web 字体的未来、 关于 Web 字体:现状与未来和再谈 Web 字体的现状与 未来。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。