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字体
就是无衬线字体,是一种通用字体族。
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默认字体最佳实践相关推荐
- Web前端开发最佳实践(8):还没有给CSS样式排序?其实你可以更专业一些
前言 CSS样式排序是指按照一定的规则排列CSS样式属性的定义,排序并不会影响CSS样式的功能和性能,只是让代码看起来更加整洁.CSS代码的逻辑性并不强,一般的开发者写CSS样式也很随意,所以如果不借 ...
- Web前端优化最佳实践及工具集锦
摘要:前端的性能对于Web应用的用户体验来说非常重要.不要以为你的Web应用的性能已经足够好了,其实还会有很多可以提升的地方.本文将介绍Google和雅虎关于前端优化的最佳实践以及工具,你可以逐一检验 ...
- web前端开发最佳实践_Web开发人员和设计师的最佳黑色星期五优惠
web前端开发最佳实践 As Black Friday 2016 is here, we thought that web developers and web designers should al ...
- Web前端优化最佳实践及工具集锦(如减少页面加载时间)
前端的性能对于一个Web应用来说非常重要,如果一个Web应用的页面加载速度非常快.对于用户的操作可以及时响应,那么产品的用户体验将会极大地提升.下图显示了页面加载速度对于用户体验的影响. 你的Web页 ...
- CSS 网页字体最佳实践
一般在网页的字体设置中,可以将字体分类三类: 系统字体:使用系统自带的字体 兜底字体:当系统字体无法正常使用,而兜底的字体 Emoji 字体:显示网页中的表情字体 为了满足不同平台,以及 Emoji ...
- web前端开发最佳实践_学习前端Web开发的最佳方法
web前端开发最佳实践 为什么要进行网站开发? (Why web development?) Web development is a field that is not going anywhere ...
- 《Web前端开发最佳实践》——1.2 Web前端开发现状
本节书摘来自华章计算机<Web前端开发最佳实践>一书中的第1章,第1.2节,作者:党 建 更多章节内容可以访问云栖社区"华章计算机"公众号查看. 1.2 Web前端开发 ...
- Web前端开发最佳实践(3):前端代码和资源的压缩与合并
一般在网站发布时,会压缩前端HTML.CSS.JavaScript代码及用到的资源文件(主要是图片文件),目的是加快文件在网络中的传输,让网页更快的展现.当然,CDN分发.缓存等方式也是加快代码或资源 ...
- Web前端优化最佳实践
一.Web 前端优化最佳实践之内容篇 Yahoo! 的 Exceptional Performance team 在 Web 前端方面作出了卓越的贡献.广为人知的优化规则也由 13 条到 14 条,再 ...
最新文章
- Js时间格式[转载]
- 仿支付宝/微信的password输入框效果GridPasswordView解析
- 首个ML的生物医药大型数据集,3行代码就能运行丨哈佛MIT斯坦福等出品
- Mantle--国外程序员最常用的iOS模型字典转换框架
- java喷泉编码_好程序员Java教程分享使用JS实现简单喷泉效果
- 万博智云上云 单机软件升级多并发SaaS平台
- jsp数据传入html页面_曾经风光无限的 JSP,为什么现在很少有人使用了?
- php 通过ajax上传文件,php – 通过ajax上传文件
- 将所有行复制到剪贴板
- 35岁程序员失业后感慨:之前月薪2万,现在找5千的工作都没人要
- 深入理解HashMap底层数据结构
- html设置发光字体制作,用CSS3制作炫酷的自定义发光文字
- LXC的Python学习笔记
- 第10周---信息熵与压缩编码基础
- 如何将D盘空间压缩并扩展C盘
- 集思录REITs基金数据python爬取写入EXCEL表
- C++ lower_bound() upper_bound() 函数用法详解(深入了解,一文学会)
- 如何用人机料法环来分析产品质量?
- 投资学作业-投资咨询
- VS2017 某项目无法打开包含文件
热门文章
- springboot 禁用 cookie / chrome 禁用 cookie
- python 在excel指定列添加数据_python读取excel指定列数据并写入到新的excel方法
- keil4如何设置自动缩进_如何设置私聊自动回复?
- php mysql 登录注销_PHP与MYSQL实现用户登录注销
- mysql数据库2012_SQLServer2012连接mysql5.5
- docker 容器保存为镜像_Docker容器和镜像操作
- idea springmvc_IDEA搭建SSM(spring+springmvc+mybatis)Maven项目的入门案例
- 合肥中学计算机老师招聘,2019年合肥北城中学教师招聘公告
- springboot 跨域配置cors
- python画饼图加牵引线_python-Matplotlib绘制分列式饼图并添加表格