`

网页设计中的默认字体样式详解

 
阅读更多

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

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

样式优先级

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

  • 第一层是浏览器的默认样式
  • 第二层是网页定义样式
  • 第三层是用户自定义样式

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

字体:arial

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

  1. Windows和Mac都预装了这款字体,应该是使用最广泛的网页字体了。它的潜在对手tahomahelvetica就没有这么幸运了。
  2. 视觉设计的专业人士可能会认为在Windows中使用tahoma、在Mac中使用helvetica更好,比如淘宝的默认字体样式font: 12px/1 Tahoma, Helvetica, Arial, "\5b8b\4f53", sans-serif;
    这是一个很不错的选择,但是你也会发现Google、YAHOO、Youtube、Bing甚至MSN的新版都使用arial作为第一默认字体。所以从美观和可读性上来讲arial应该是完全可以接受的。
  3. 一般情况下设置font-family都会在最后设置通用字体族以保证其安全性,比如Google的设置为font-family:arial,sans-serif;,但是至少在非中文版的Win7下当编码是GBK时,IE8会因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,比如你设置最小字体为10px,最后也变成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就是这样做的,好处是既可以编写更快也能提升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 默认字体》

分享到:
评论

相关推荐

    Word2021中修改默认样式.docx

    Word 2021 中修改默认样式详解 Word 2021 中修改默认样式是很多用户想要掌握的技能,其中包括修改文档的默认格式、字体、字号、段落间距等。通过本篇文章,我们将详细介绍如何修改 Word 2021 中的默认样式,并提供...

    RadioButton自定义样式详解

    在Android开发中,...通过上述介绍,我们可以了解到RadioButton和RadioGroup的基本使用,以及如何通过自定义样式来实现个性化的设计。实际开发中,开发者可以根据需求灵活运用这些知识,提升应用的用户体验。

    PyQt5 控件字体样式等设置的实现

    本文将重点介绍如何在PyQt5中进行控件字体样式的设置,并通过具体的代码示例来展示其实现过程。 #### 一、API接口设置 在PyQt5中,可以通过多种方式来设置控件的字体样式。以下是一些常见的设置方法及其应用场景:...

    CSS中的ul与li样式详解共5页.pdf.zip

    这份名为"CSS中的ul与li样式详解共5页.pdf.zip"的压缩文件很可能包含了关于如何使用CSS来定制这些列表元素样式的深入讲解。 `<ul>` 标签用于创建一个无序列表,通常显示为带有圆点或小方块的项目符号。这些列表可以...

    网页样式设计——CSS使用详解_0.rar

    通过使用CSS,可以有效地对页面的布局、颜色、字体等外观效果进行控制,让网页的表现和内容分离。 #### 二、CSS的作用 1. **提高页面美观度**:通过CSS可以精确地控制页面元素的大小、位置、颜色等属性,使网页...

    jquery-easyui自定义样式

    本篇文章将深入探讨如何对jQuery EasyUI进行自定义样式设计,使你的网页界面更具个性与美观。 首先,我们要理解jQuery EasyUI的核心设计理念。EasyUI通过预定义的CSS样式和JavaScript插件,简化了UI组件的创建和...

    div+css制作的鼠标经过放大字体样式的特效

    在网页设计中,为了提升用户体验以及增强页面的互动性,开发者经常需要实现各种各样的动态效果。本文将详细介绍如何使用div和CSS来制作一个简单的鼠标经过时字体放大的特效。通过这个实例,我们可以学习到CSS中的...

    精通CSS DIV网页样式与布局.pdf+书中实例

    从提供的文件信息来看,这份资料主要关注的是CSS(层叠样式表)与DIV元素在网页设计中的应用。接下来,我们将围绕这些关键词展开一系列相关的知识点,帮助读者更好地理解CSS与DIV在网页布局及样式化方面的核心概念和...

    CSS中文样式表

    它能让你将样式规则从内容中分离出来,使网页设计更加灵活、易于维护,同时也为网页提供了丰富的视觉表现力。 在CSS中,你可以定义文本的字体、颜色、大小、行高,设置元素的布局方式,包括边距、填充、宽度、高度...

    CSS默认可继承样式详解

    常听说,颜色和字体是可继承的,盒模型样式是不可继承的,但其他样式呢?本文内容包括所有可继承的样式 常用可继承样式 CSS Code复制内容到剪贴板 color  cursor  direction  font  letter-spacing  line...

    网页制作基本操作

    ### 网页制作基本操作知识点详解 #### 一、网页基本构成元素 根据所提供的文件信息,我们可以了解到一些关于网页制作的基本操作。首先,我们来了解一下网页的基本结构及其构成元素。 1. **`<html>`标签**:网页的...

    自考网页设计与制作试卷及答案(四)_网页设计与制作期末考试试题

    ### 自考网页设计与制作知识点解析 #### 一、基础知识概览 - **课程代码**:00900 - **考核形式**:选择题(25道,每题1分,共计25分) #### 二、知识点详解 ##### 1. URL (统一资源定位符) - **定义**:URL是...

    H5 公共样式2.0版本

    在这个文件中,我们可以看到对HTML5新元素如、、、等的默认样式设定,以及通用的字体设置、颜色方案和间距规则。此外,`base.css`可能还包括了一些基础的响应式设计,如媒体查询,以确保在不同屏幕尺寸下都能良好...

    HTML4标签的默认样式列表

    ### HTML4标签的默认样式详解 #### 概述 HTML4是超文本标记语言的一个版本,广泛用于构建网页。为了确保网页元素在不同浏览器中具有一致的表现形式,HTML4定义了一系列标签及其默认样式。本文将详细介绍这些标签的...

    QSS.rar_QSS样式表_QT QSS_QT 样式_Qt样式表_qss

    Qt QSS(Qt Style Sheets)是Qt框架提供的一种强大的样式定义机制,类似于Web开发中的CSS(Cascading Style Sheets)。QSS允许开发者通过文本文件来定制Qt应用程序的外观和感觉,使得用户界面的设计更加灵活和个性化...

    用DIV+CSS技术设计的个人网页(网页制作课作业)

    【个人网页设计与DIV+CSS技术详解】 网页设计是互联网时代不可或缺的一项技能,尤其是在信息化高度发展的今天,一个吸引人的、功能完善的个人网页可以展示自我、推广业务或分享兴趣爱好。本篇文章将深入探讨如何...

    网页设计-页面布局篇(Css+Div)

    **标题与描述**:本教程聚焦于网页设计中的关键环节——页面布局,并详细介绍了如何运用CSS和Div技术来构建网页的基本结构。 **重要性**:网页设计是网络开发的重要组成部分之一,良好的页面布局不仅能够提升用户...

    我的css框架——base.css(重设浏览器默认样式)

    在网页设计中,CSS框架是必不可少的工具,它们帮助开发者快速构建一致且响应式的界面,减少样式冲突,提高开发效率。本文重点介绍的"base.css"是一个基础的CSS框架,其核心目标是重置浏览器的默认样式,确保跨浏览器...

Global site tag (gtag.js) - Google Analytics