`

默认Web字体样式

 
阅读更多

通常用户看到的页面的样式(css)会受到三层控制:

  1. 第一层是浏览器的默认样式;
  2. 第二层是网页定义样式;
  3. 第三层是用户自定义样式.

和CSS一样,后面的优先级高于前面的,也就是说网页定义样式可以覆盖浏览器的默认样式, 而用户自定义样式优先级最高。

实际情况是虽然浏览器都或多或少提供了用户自定义样式的功能, 但是极少数会有用户去自定义,一般用也是高级用户。

而浏览器默认的样式往往在不同的浏览器、不同的语言版本甚至不同的系统版本都有不同的设置, 这就导致如果直接利用默认样式的页面在各个浏览器下显示非常不一致, 于是就有了类似 YUI的reset 之类用来尽量重写浏览器的默认设置保证各个浏览器样式一致性的做法。

拿字体来说,各个浏览器默认的字体种类、字体大小和字体行高都不一样, 比如IE8的中文版在Windows XP下显示网页时默认字体是宋体,而英文版肯定不会如此。 所以我们需要统一设置默认的字体样式,以便实现一致的显示效果来保证设计的一致性和提高开发效率。

以后准备使用如下默认字体样式:

body{
  font: 12px/1.5 arial;
}

字体:arial

我们页面的绝大部分内容字符都是中文, 毫无疑问目前为止在网页上最常用也是最通用的显示中文的字体是宋体, 但是宋体在显示英文、数字和英文符号时过于糟糕,比如?字符, 所以我们一般期望通过CSS来实现用更好的字体样式来显示它们,然后用宋体来显示中文和中文符号。

之所以选择arial是因为:

  • Windows和Mac都预装了这款字体,应该是使用最广泛的网页字体了。 它的潜在对手tahoma和helvetica就没有这么幸运了。

  • 视觉设计的专业人士可能会认为在Windows中使用tahoma、在Mac中使用helvetica更好, 比如淘宝的默认字体样式是font: 12px/1 Tahoma, Helvetica, Arial, "\5b8b\4f53", sans-serif; 这是一个很不错的选择,但是你也会发现Google、YAHOO、Youtube、Bing甚至MSN的新版都 使用arial作为第一默认字体。 所以从美观和可读性上来讲arial应该是完全可以接受的。

  • 一般情况下设置font-family都会在最后设置通用字体族以保证其安全性, 比如Google的设置为 font-family:arial,sans-serif; 但是至少在非中文版的Win7下当编码是GBK时,IE8会因sans-serif来渲染宋体, 导致字体出现变形,这就是为什么淘宝需要在sans-serif前加上宋体而Google无需这样做的原因。

  • 因为中文字体的选择非常有限,所以目前所有的主流浏览器都设置使用宋体来显示中文。 Baidu的首页和搜索结果页使用font-family:arial;可以从侧面说明这样做的安全性。 可能有人注意到Firefox中国版默认显示的中文字体是微软雅黑, 这是因为谋智网络擅自修改了用户自定义样式,不允许网页的样式覆盖浏览器设置的样式。 也是由于类似的情况,我们要弹性设计网页非常重要。

使用英文字体作为第一默认字体会导致的问题之一就是中英文以及符号混排时的对齐问题、 通过设置行高和hasLayout能解决绝大部分情况,但是都不会很完美, 如果把字体改成“宋体”能彻底的解决问题。

很明显,这个问题只出现在IE上。 所以,如果你的网站很少使用英文、数字和英文符号, 那么直接设置 {font-family:\5b8b\4f53;} 也是很合理的选择。

大小:12px

  1. 12px是宋体能显示的极限,虽然微软雅黑能显示更小的字体,但目前的应用环境尚未成熟。 由于宋体基本上是目前显示中文唯一的通用Web字体,所以12px成为最常用的字体大小。 我们当然可以依据产品的需要来修改这个默认值。
  2. 不用考虑基于字体大小(em)的设计。
  3. 在Chrome3.0之后的中文版中,字体大小最小值是12px,比如你设置最小字体为10px,最后也变成12px。

行高:1.5倍

  • 这是一个经验值, 不同的产品对这个值要求可能不同, 但我们一般会设置最常用的为默认值.

比如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设置其行高也为偶数能解决一些特殊情况下的字体对其问题。

  • 在IE6和IE7中,行高值必须大于字体的2px才能保证字体的完整显示或当其作为链接时能有效显示下划线。

  • 设置line-height时,注意不要使用单位(包括%在内), 因为子节点会继承经过运算后的line-height值, 所以当使用单位后浏览器会把line-height计算成第一次定义的绝对值, 而不会随着字体大小的变化而变化,而无单位的数值表示是所在容器的font-size的倍数, 所以设置为无单位的数值是最佳选择。

  • 深入CSS 行高非常有利于理解line-height,值得一读。

性能和效率

  1. 大部分平台都有arial,减少浏览器的查找时间。
  2. 代码最少,书写方便。arial基本上是名字最短的字体了,可以节约CSS的大小。
  3. 所有的字母都小写,目前Google就是这样做的,好处是既可以编写更快也能提升Gzip压缩的效率。
  4. 中文最好用unicode表示,比如使用宋体是{font-family:\5b8b\4f53;}, 使用微软雅黑是{font-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 字体的现状与未来。

分享到:
评论

相关推荐

    网页制作 默认Web字体样式

    在网页制作的过程中,字体样式的...总之,网页制作中默认Web字体样式的设置,需要综合考虑浏览器兼容性、可读性和美观性。通过精心设计和测试,可以确保网页在不同环境下都具有良好的显示效果,并提升用户的浏览体验。

    浏览器默认样式表

    浏览器默认样式表(Browser Default Stylesheet)是各个主流浏览器内置于其渲染引擎中的CSS样式规则,用于在网页未定义特定样式时提供基本的外观呈现。这些样式定义了HTML元素的基本表现,如字体、颜色、间距等,...

    自定义web字体并通过@font-face在网页中嵌入自定义字体

    `@font-face`规则是CSS(层叠样式表)提供的一种方法,允许开发者在网页中使用非系统默认的字体,使得设计师能够更加自由地实现他们的视觉设计理念。本篇文章将详细探讨如何使用`@font-face`规则在网页中嵌入自定义...

    各浏览器默认css样式(包括各浏览器的早期版本)

    在网页设计和开发中,了解不同浏览器的默认CSS样式至关重要,因为这直接影响到网页在不同浏览器上的呈现效果。本文将详细解析各主流浏览器,包括早期版本的默认CSS样式差异,帮助开发者更好地理解和处理浏览器兼容性...

    Web前端与移动开发之css字体属性.txt

    4.font-style 字体样式 normal正常(不倾斜)/tialic斜体 font-style主要将倾斜的标签em i改为不倾斜 5.字体的复合属性(简写方式 节约代码) body { font: font-style font-weight font-size/line-height ...

    web编程下通用的样式  

    在实际应用中,我们还应考虑CSS的组织结构和最佳实践,如使用模块化(Sass, Less等预处理器)、重置样式(reset.css)以消除浏览器默认样式、响应式设计(媒体查询)和性能优化(如延迟加载、减少HTTP请求等)。...

    XP默认主题菜单样式

    标题中的“XP默认主题菜单样式”指的是在Windows XP操作系统中常见的用户界面元素,特别是指菜单的视觉呈现和交互效果。这种样式通常具有清晰的图标、蓝色高亮选中效果以及平滑的过渡动画,体现了XP时代的UI设计风格...

    web css实现整站样式切换

    "web css实现整站样式切换"这一主题就是关于如何让网站用户可以根据个人喜好选择不同的主题或样式。这一技术通常涉及到CSS(层叠样式表)和JS(JavaScript)的协同工作。下面将详细介绍这个过程及其相关知识点。 一...

    通过Web打印超市一样的小票

    浏览器提供了一个内置的API——window.print(),允许用户调用系统默认的打印机进行打印。然而,对于复杂布局和自定义样式的票据打印,这个基本功能可能不够用。 二、HTML和CSS的优化 为了打印出超市小票那样的条形...

    页面应用系统皮肤并且可以获取当前系统默认字体的颜色

    通常,这样的文件可能包含CSS样式表,展示如何定义系统皮肤,或者JavaScript脚本,说明如何获取和使用系统默认字体颜色。为了进一步理解这个文件,我们需要解压并查看其内容。如果这是一个代码文件,可能包含关键...

    各浏览器默认的css

    描述中提到的博文链接指向了一篇关于浏览器默认CSS样式的文章,虽然具体内容未给出,但可以推测这篇文章可能详细列举了不同浏览器(如Chrome、Firefox、Safari、Edge和Internet Explorer)对于CSS元素的默认渲染方式...

    2019年下半年Web前端开发初级理论考试附答案.pdf

    1. 字体样式:可以使用 font 属性来设置文字的大小、粗细、行高、字体、字体样式等,例如 font:14px "微软雅黑" 28px 600 italic。 2. 背景样式:可以使用 background 属性来设置背景颜色、背景图片、背景图片的垂直...

    web前端重置样式表normalize.css+reset.css

    在Web前端开发中,"重置样式表"是至关重要的一步,它可以帮助消除浏览器之间的默认样式差异,确保页面在各种浏览器上具有一致的显示效果。"normalize.css"和"reset.css"是两种常见的重置样式表方法,它们在创建响应...

    css3插件,web前端

    10. **Web字体**:CSS3的`@font-face`规则允许开发者使用自定义字体,不再受限于浏览器默认字体,从而提升品牌形象和设计一致性。 对于初学者来说,了解并掌握这些CSS3插件和特性是提升前端技能的重要步骤。通过...

    JavaScript实现的 XP 默认主题菜单样式 xp-pixos菜单样式

    XP-pixos菜单样式就是这样一个项目,它旨在复刻微软Windows XP操作系统的默认菜单界面,带给用户熟悉的视觉体验。这个项目主要关注前端开发,使用JavaScript语言和可能涉及的ECMAScript特性,来构建可交互的菜单组件...

    10个增强WEB字体排版的JQUERY插件.docx

    以下是一些用于优化Web字体排版的jQuery插件的详细介绍: 1. Lettering.js:这是一个非常基础且流行的插件,它将每个文本元素拆分为单独的元素,使设计师可以对每个字母进行精确的CSS操作,如调整字距或添加特殊...

    UEditor 默认字体和字号的修改方法

    在进行编辑器字体样式修改的过程中,可能会涉及到其他相关知识,比如CSS样式定义、JavaScript文件操作、浏览器兼容性问题等。这些知识点对于确保编辑器修改后能正常工作是必不可少的。 最后,在进行编辑器修改时,...

    CssButton按钮样式

    例如,我们可以设置按钮的颜色、大小、边框和字体样式: ```css button { background-color: #4CAF50; /* 背景色 */ border: none; /* 无边框 */ color: white; /* 字体颜色 */ padding: 15px 32px; /* 内边距 ...

    PowerBuilder系统字体列表

    此外,开发者还可以利用PowerBuilder的API调用功能,结合Windows API函数(如EnumFontFamilies)来获取更详细的字体信息,比如字体样式(粗体、斜体)、大小和字符集。这为创建更加定制化的用户界面提供了可能。 在...

Global site tag (gtag.js) - Google Analytics