环境: 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,在非中文操作系统的不会出现很难看。我推荐方案四。

转载于:https://www.cnblogs.com/yupeng/archive/2011/04/08/2009900.html

web默认字体最佳实践相关推荐

  1. Web前端开发最佳实践(8):还没有给CSS样式排序?其实你可以更专业一些

    前言 CSS样式排序是指按照一定的规则排列CSS样式属性的定义,排序并不会影响CSS样式的功能和性能,只是让代码看起来更加整洁.CSS代码的逻辑性并不强,一般的开发者写CSS样式也很随意,所以如果不借 ...

  2. Web前端优化最佳实践及工具集锦

    摘要:前端的性能对于Web应用的用户体验来说非常重要.不要以为你的Web应用的性能已经足够好了,其实还会有很多可以提升的地方.本文将介绍Google和雅虎关于前端优化的最佳实践以及工具,你可以逐一检验 ...

  3. web前端开发最佳实践_Web开发人员和设计师的最佳黑色星期五优惠

    web前端开发最佳实践 As Black Friday 2016 is here, we thought that web developers and web designers should al ...

  4. Web前端优化最佳实践及工具集锦(如减少页面加载时间)

    前端的性能对于一个Web应用来说非常重要,如果一个Web应用的页面加载速度非常快.对于用户的操作可以及时响应,那么产品的用户体验将会极大地提升.下图显示了页面加载速度对于用户体验的影响. 你的Web页 ...

  5. CSS 网页字体最佳实践

    一般在网页的字体设置中,可以将字体分类三类: 系统字体:使用系统自带的字体 兜底字体:当系统字体无法正常使用,而兜底的字体 Emoji 字体:显示网页中的表情字体 为了满足不同平台,以及 Emoji ...

  6. web前端开发最佳实践_学习前端Web开发的最佳方法

    web前端开发最佳实践 为什么要进行网站开发? (Why web development?) Web development is a field that is not going anywhere ...

  7. 《Web前端开发最佳实践》——1.2 Web前端开发现状

    本节书摘来自华章计算机<Web前端开发最佳实践>一书中的第1章,第1.2节,作者:党 建 更多章节内容可以访问云栖社区"华章计算机"公众号查看. 1.2 Web前端开发 ...

  8. Web前端开发最佳实践(3):前端代码和资源的压缩与合并

    一般在网站发布时,会压缩前端HTML.CSS.JavaScript代码及用到的资源文件(主要是图片文件),目的是加快文件在网络中的传输,让网页更快的展现.当然,CDN分发.缓存等方式也是加快代码或资源 ...

  9. Web前端优化最佳实践

    一.Web 前端优化最佳实践之内容篇 Yahoo! 的 Exceptional Performance team 在 Web 前端方面作出了卓越的贡献.广为人知的优化规则也由 13 条到 14 条,再 ...

最新文章

  1. Js时间格式[转载]
  2. 仿支付宝/微信的password输入框效果GridPasswordView解析
  3. 首个ML的生物医药大型数据集,3行代码就能运行丨哈佛MIT斯坦福等出品
  4. Mantle--国外程序员最常用的iOS模型字典转换框架
  5. java喷泉编码_好程序员Java教程分享使用JS实现简单喷泉效果
  6. 万博智云上云 单机软件升级多并发SaaS平台
  7. jsp数据传入html页面_曾经风光无限的 JSP,为什么现在很少有人使用了?
  8. php 通过ajax上传文件,php – 通过ajax上传文件
  9. 将所有行复制到剪贴板
  10. 35岁程序员失业后感慨:之前月薪2万,现在找5千的工作都没人要
  11. 深入理解HashMap底层数据结构
  12. html设置发光字体制作,用CSS3制作炫酷的自定义发光文字
  13. LXC的Python学习笔记
  14. 第10周---信息熵与压缩编码基础
  15. 如何将D盘空间压缩并扩展C盘
  16. 集思录REITs基金数据python爬取写入EXCEL表
  17. C++ lower_bound() upper_bound() 函数用法详解(深入了解,一文学会)
  18. 如何用人机料法环来分析产品质量?
  19. 投资学作业-投资咨询
  20. VS2017 某项目无法打开包含文件

热门文章

  1. springboot 禁用 cookie / chrome 禁用 cookie
  2. python 在excel指定列添加数据_python读取excel指定列数据并写入到新的excel方法
  3. keil4如何设置自动缩进_如何设置私聊自动回复?
  4. php mysql 登录注销_PHP与MYSQL实现用户登录注销
  5. mysql数据库2012_SQLServer2012连接mysql5.5
  6. docker 容器保存为镜像_Docker容器和镜像操作
  7. idea springmvc_IDEA搭建SSM(spring+springmvc+mybatis)Maven项目的入门案例
  8. 合肥中学计算机老师招聘,2019年合肥北城中学教师招聘公告
  9. springboot 跨域配置cors
  10. python画饼图加牵引线_python-Matplotlib绘制分列式饼图并添加表格