zoukankan      html  css  js  c++  java
  • web默认字体最佳实践

    环境: ie6 (window sp3) ie7,8,9 firefox3.6, chrome10,opera 10.62 (window7)

    本文先列举出几种常见的字体的显示问题以及优点,然后再列举几个web字体的最佳实践,一一作一分析。

    1) Tahoma&& Arial字体比较

    (1)字体下划线问题:Tahoma在ie6下的li元素里面显示很好,其他的所有浏览器中,下划线都会粘连中文文字,英文问题没有粘连;但是Arial字体除了ie6,firefox3.6 ,其他浏览器都是下划线粘贴着文字。

    (2)13px中文问题:ie6 和firefox3.6 显示很难看,用的是14号字体,其他浏览器都用12px字体显示的(Arial字体比Tahoma字体好看点);

    (3) 中英文混排问题:同一行中出现了中文和英文,如果设置了vertical-align属性,会出现高低不齐的现象。ie7出现了错位。zoom:1可以解决一部分问题。

    (4)设置Tahoma字体后可以使表单元素和label对齐(比如radio,check ,text,select和相应的文本对齐,同时设置两者 vertical-align:middle ) 

    2)宋体的问题(又名SimSun),unicode 编码 \5b8b\4f53

    (1) Opera 下,只认 "宋体", 不认 SimSun

    eg:font: 12px arial; 此时,Opera 默认中文字体就是宋体,font: 12px sans-serif; 此时,Opera 默认中文字体就是宋体。
    font: 12px tahoma,arial,simsun,sans-serif; 对于'宋体'来说,如果后面已经没有中文字体,用 simsun 还是 ok 的。 

    3)helvetica的问题

    (1)找不到字体的时候,使用默认字体。

    (2)如果用 font: 12px helvetica2,tahoma; 定义字体时,会调用排在第二的 tahoma. 

    (3) font: 12px xxx,tahoma; 一切正常 

    4)关于行高

    (1)font: 12px/1 \5b8b\4f53; 行高为 1 时,IE6-7 下,高度不够时,会导致中文上下显示不全。 

    (2)font: 12px/1.5 \5b8b\4f53; 行高为 1.5 时,一切正常。 文章中推荐使用1.5

     5)中文编码对字体的影响

    (1)如果没有设置宋体,在非中文操作系统中很难看。

    (2)可以通过不设置sans-serif 来避免上面的问题。

    6)关于sans-serif字体 

    就是无衬线字体,是一种通用字体族。

    常见的无衬线字体有 Trebuchet MS, Tahoma, Verdana, Arial, Helvetica, 中文的幼圆、隶书等等。

    font-family最后加上sans-serif,也是为了保证能够调用这个字体族里面的字体,因为大多数计算机里都有这种字体。

     7)字体继承方面:在IE里,所有的表单元素都不继承body的字体属性,需要单独设置 。 

     总结:

    方案一:body {font-family: Arial, sans-serif; }该方案能解决在ie6下的问题,但是该方案对表单对齐没有优势。

    方案二:body {font-family: Tahoma, sans-serif; } 该方案不能很好的解决在ie6下的下划线问题,此外在ie6下对于13px的字体也不能很好的支持。

    方案三: body {font: 12px/1.5 tahoma, arial, simsun, sans-serif;} 比较tahoma 和arial字体,arial在ie6下使用较少。顾推荐。

    方案四:body {font: 12px/1.5 tahoma, arial, \5b8b\4f53;} 使用unicode字符,支持各种格式。

    此外不使用sans-serif,在非中文操作系统的不会出现很难看。我推荐方案四。


      

  • 相关阅读:
    fiddler查看IP地址和请求响应时间
    web安全测试排查
    搞站思路 <陆续完善中>
    sys模块进度条玩法笔记
    Webbench、ab命令:做压力测试的工具和性能的监控工具
    xlwings excel(三)
    xlwings excel(二)
    xlwings excel(一)
    xlwings API Documentation
    Python+Excel 操作对比
  • 原文地址:https://www.cnblogs.com/yupeng/p/2009900.html
Copyright © 2011-2022 走看看