《
解析CSS设置默认字体样式》文章地址:http://www.tfxk.com/wangyesheji/jianzhanjingyan/030234S12013.htm
这是一个教训值,不同的产品对这个值请求可能不同,但我们正常会设置最常用的为默认值。比如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设置其行高也为偶数能解决一些特别情况下的字体对其问题。
未来
拿字体来说,各个浏览器默认的字体种类、字体大小和字体行高都不一样,比如IE8的中文版在Windows XP下显示网页时默认字体是宋体,而英文版确定不会如斯。所以我们需要同一设置默认的字体样式,以便实现一致的显示效果来保证设计的一致性和进步开发效率。
在IE6和IE7中,行高值必需大于字体的2px才干保证字体的完全显示或当其作为链接时能有效显示下划线。
中文最好用unicode表现,好比使用宋体是{font-family:\5b8b\4f53;},使用微软雅黑是{font-family:\5fae\8f6f\96c5\9ed1;},这样的利益是防止编码问题,解密各浏览器加载页面外部资源的策略,同时能得到所有的主流浏览器的支撑。
Tag:CSS 字体样式 CSS 字体样式
在Chrome3.0之后的中文版中,字体大小最小值是12px,比如你设置最小字体为10px,最后也变成12px。
不必斟酌基于字体大小(em)的设计。
12px是宋体能显示的极限,虽然微软雅黑能显示更小的字体,但目前的运用环境尚未成熟。因为宋体根本上是目前显示中文唯一的通用Web字体,所以12px成为最常用的字体大小。我们当然可以根据产品的需要来修改这个默认值。
样式优先级
默认字体样式会因为浏览器不同,版本不同,甚至操作体系不同的设置不同导致如果直接应用默认样式的页面在各个浏览器下显示非常不一致,于是就有了类似YUI的reset之类用来尽量重写浏览器的默认设置保证各个浏览器样式一致性的做法。
通过对中英文及符号混排的测试, 我发现微软雅黑实在表示相称不错,包含英文数字和英文字符以及在IE6和IE7的显示后果上,但独一的遗憾是在XP下 假如装置了微软雅黑字体的用户没有打 开“使用屏幕字体的边沿平滑”选项的话,在firefox、Safari和Opera、特殊是IE6下会无比含混难 以识别。针对这个问标题前并没有很好的 解决计划,所以只有等到IE6使用比率十分小的时候才可能正式的使用它。或者需要到2014年,XP逝世掉的时 候。
大部门平台都有arial,减少浏览器的查找时光。
使用准确的字体品种写法,避免使用引号,这样可以缩小CSS的大小。中文字体可以按上一条方法来编写。
跟CSS一样,后面的优先级 高于前面的,也就是说网页定义样式可以笼罩阅读器的默认样式,而用户自定义样式优先级最高。不外,当有 !important 时,网页样式能够覆盖用户自定义款式。用户!important > 网页!important > 用 户 > 网页 > 浏览器默认。
--> [
网站建设之]解析CSS设置默认字体样式
机能和效力
第一层是浏览器的默认样式
第二层是网页定义样式
第三层是用户自定义样式
个别情形下设置font-family都会在最后设置通用字体族以保障其保险性,比方Google的设置为font- family:arial,sans-serif;,但是至少在非中文版的Win7下当编码是GBK时,IE8会因sans-serif来渲染宋体,导致 字体呈现变形,这就是为什么淘宝须要在sans-serif前加上宋体而Google无需这样做的起因。
因为中文字体的取舍异常有限,所以 目前所有的主流浏览器都设置使用宋体来显示中文。Baidu的首页和搜寻成果页使用font-family:arial;可以从侧面阐明这样做的平安性。 可能有人留神到Firefox中国版默认显示的中文字体是微软雅黑,这是由于谋智网络擅自修正了用户自定义样式,不容许网页的样式覆盖浏览器设置的样式,解密前端开发人员必备技能。 也是因为相似的情况,咱们要弹性设计网页非常主要。
代码起码,书写便利。arial基础上是名字最短的字体了,可以节俭CSS的大小。
这是一个很不错的抉择,然而你也会发明Google、YAHOO、Youtube、Bing甚至MSN的新版都使用arial作为第一默认字体。所以从雅观和可读性上来讲arial应该是完整可以接收的。
所有的字母都小写,目前Google就是这样做的,好处是既可以编写更快也能晋升Gzip紧缩的效率。
深刻CSS 行高非常有利于懂得line-height,值得一读。
通常用户看到的页面的样式会受到三层把持:
固然很早就有了@font-face,但是浏览器的支持、网速和贸易问题,导致它很少被利用,解密你的博客做不好的10个原因。最近对于字体的好新闻是 Firefox3.6将支持Web Open ,解决跨浏览器兼容的CSS编码准则;Font Forma。关于Web字体将来的相干信息可以看Web 字体的未来、关于 Web ,解决用CSS控制DIV居中失效的问题;字体:现状 与未来和再谈 Web 字体的现状与未来。
字体:arial
设置line-height时,注意不要使用单位(包括%在内),因为子节点会继续经由运算后的line-height值,所以当使用单位后浏览器会把 line-height盘算成第一次定义的相对值,而不会跟着字体大小的变化而变更,而无单位的数值表示是所在容器的font-size的倍数,所以设置 为无单位的数值是最佳选择。
使用英文字体作为第一默认字领会导致的问题之一就是中英文以及符号混排时的对齐问题、通 过设置行高和hasLayout能解决绝大部分情况,但是都不会很完善,如果把字体改成“宋体”能彻底的解决问题。很显明,这个问题只涌现在IE上。所 以,如果你的网站很少使用英文、数字和英文符号,那么直接设置{font-family:\5b8b\4f53;}也是很公道的选择。
我们页面的绝大局部内容字符都是中文,毫无疑难目前为止在网页 上最常用也是最通用的显示中文的字体是宋体,但是宋体在显示英文、数字和英文符号时过于蹩脚,比如©字符,所以我们普通冀望通过CSS来实现用更好的字体 样式来显示它们,而后用宋体来显示中文和中文符号。之所以挑选arial是因为:
Windows和Mac都预装了这款字体,应当是应用最普遍的网页字体了。它的潜在对手tahoma和helvetica就不这么荣幸了。
视觉设计的专业人士可能会以为在Windows中使用tahoma、在Mac中使用helvetica更好,比如淘宝的默认字体样式是 font: 12px/1 Tahoma, Helvetica, Arial, ”\5b8b\4f53″, sans-serif;
行高:1.5倍
大小:12px
(责任编辑:网站建设)
解析CSS设置默认字体样式相关文章