详解css设置默认字体
浏览器默认的样式往往在不同的浏览器、不同的语言版本甚至不同的系统版本都有不同的设置,这就导致如 果直接利用默认样式的页面在各个浏览器下显示非常不一致,于是就有了类似YUI的reset之类用来尽量重写浏览器的默认设置保证各个浏览器样式一致性的做法。
拿字体来说,各个浏览器默认的字体种类、字体大小和字体行高都不一样,比如IE8的中文版在Windows XP下显示网页时默认字体是宋体,而英文版肯定不会如此。所以我们需要统一设置默认的字体样式,以便实现一致的显示效果来保证设计的一致性和提高开发效率。
样式优先级
通常用户看到的页面的样式会受到三层控制:
第一层是浏览器的默认样式
第二层是网页定义样式
第三层是用户自定义样式
和CSS一样,后面的优先级 高于前面的,也就是说网页定义样式可以覆盖浏览器的默认样式,而用户自定义样式优先级最高。不过,当有 !important 时,网页样式可以覆盖用户自定义样式。用户!important > 网页!important > 用 户 > 网页 > 浏览器默认。
字体:arial
我们页面的绝大部分内容字符都是中文,毫无疑问目前为止在网页 上最常用也是最通用的显示中文的字体是宋体,但是宋体在显示英文、数字和英文符号时过于糟糕,比如©字符,所以我们一般期望通过CSS来实现用更好的字体 样式来显示它们,然后用宋体来显示中文和中文符号。之所以选择arial是因为:
Windows和Mac都预装了这款字体,应该是使用最广泛的网页字体了。它的潜在对手tahoma和helvetica就没有这么幸运了。
视觉设计的专业人士可能会认为在Windows中使用tahoma、在Mac中使用helvetica更好,比如淘宝的默认字体样式是 font: 12px/1 Tahoma, Helvetica, Arial, “\5b8b\4f53”, sans-serif;
这是一个很不错的选择,但是你也会发现Google、YAHOO、Youtube、Bing甚至MSN的新版都使用arial作为第一默认字体。所以从美观和可读性上来讲arial应该是完全可以接受的。
一般情况下设置font-family都会在最后设置通用字体族以保证其安全性,比如Google的设置为font- family:arial,sans-serif;,但是至少在非中文版的Win7下当编码是GBK时,IE8会因sans-serif来渲染宋体,导致 字体出现变形,这就是为什么淘宝需要在sans-serif前加上宋体而Google无需这样做的原因。
因为中文字体的选择非常有限,所以 目前所有的主流浏览器都设置使用宋体来显示中文。Baidu的首页和搜索结果页使用font-family:arial;可以从侧面说明这样做的安全性。 可能有人注意到Firefox中国版默认显示的中文字体是微软雅黑,这是因为谋智网络擅自修改了用户自定义样式,不允许网页的样式覆盖浏览器设置的样式。 也是由于类似的情况,我们要弹性设计网页非常重要。
使用英文字体作为第一默认字体会导致的问题之一就是中英文以及符号混排时的对齐问题、通 过设置行高和hasLayout能解决绝大部分情况,但是都不会很完美,如果把字体改成“宋体”能彻底的解决问题。很明显,这个问题只出现在IE上。所 以,如果你的网站很少使用英文、数字和英文符号,那么直接设置{font-family:\5b8b\4f53;}也是很合理的选择。
大小:12px
12px是宋体能显示的极限,虽然微软雅黑能显示更小的字体,但目前的应用环境尚未成熟。由于宋体基本上是目前显示中文唯一的通用Web字体,所以12px成为最常用的字体大小。我们当然可以依据产品的需要来修改这个默认值。
不用考虑基于字体大小(em)的设计。
在Chrome3.0之后的中文版中,字体大小最小值是12px,比如你设置最小字体为10px,最后也变成12px。
行高:1.5倍
这是一个经验值,不同的产品对这个值要求可能不同,但我们一般会设置最常用的为默认值。比如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设置其行高也为偶数能解决一些特殊情况下的字体对其问题。
在IE6和IE7中,行高值必须大于字体的2px才能保证字体的完整显示或当其作为链接时能有效显示下划线。
设置line-height时,注意不要使用单位(包括%在内),因为子节点会继承经过运算后的line-height值,所以当使用单位后浏览器会把 line-height计算成第一次定义的绝对值,而不会随着字体大小的变化而变化,而无单位的数值表示是所在容器的font-size的倍数,所以设置 为无单位的数值是最佳选择。
深入CSS 行高非常有利于理解line-height,值得一读。
性能和效率
大部分平台都有arial,减少浏览器的查找时间。
代码最少,书写方便。arial基本上是名字最短的字体了,可以节约CSS的大小。
所有的字母都小写,目前Google就是这样做的,好处是既可以编写更快也能提升Gzip压缩的效率。
中文最好用unicode表示,比如使用宋体是{font-family:\5b8b\4f53;},使用微软雅黑是{font-family:\5fae\8f6f\96c5\9ed1;},这样的好处是避免编码问题,同时能得到所有的主流浏览器的支持。
使用正确的字体种类写法,避免使用引号,这样可以缩小CSS的大小。中文字体可以按上一条方式来编写。
未来
通过对中英文及符号混排的测试, 我发现微软雅黑其实表现相当不错,包括英文数字和英文字符以及在IE6和IE7的显示效果上,但唯一的遗憾是在XP下 如果安装了微软雅黑字体的用户没有打 开“使用屏幕字体的边缘平滑”选项的话,在firefox、Safari和Opera、特别是IE6下会非常模糊难 以辨认。针对这个问题目前并没有很好的 解决方案,所以只有等到IE6使用比率非常小的时候才可能正式的使用它。或许需要到2014年,XP死掉的时 候。
虽然很早就有了@font-face,但是浏览器的支持、网速和商业问题,导致它很少被应用。最近关于字体的好消息是 Firefox3.6将支持Web Open Font Forma。关于Web字体未来的相关信息可以看Web 字体的未来、关于 Web 字体:现状 与未来和再谈 Web 字体的现状与未来。
http://www.taodudu.cc/news/show-4425079.html
相关文章:
- 中国电信天翼物联品牌升级,注智产业数字化
- 计算机基础学习记录4-2
- 运营商大数据:未来移动联通电信三大运营商数据会同步共享吗?
- 【计息日期】国债逆回购类产品的起息日期和兑付日期,如何用python优雅实现?~
- 国债期货合约约(国债期货合约是什么)
- 【状语从句练习题】状语从句 + 过去完成时
- 服务器装系统提示获取分区失败,u盘装系统时获取硬盘分区失败怎么办
- win7系统无法更新计算机配置,win7提示无法更新启动配置怎么办
- 【Python3.6爬虫学习记录】(十五)Scrapy爬虫框架的应用及马赛克拼图生成
- 最黑链的如何写隐藏代码
- 黑链到底有没有用?
- 时间的力量
- 小组查经分享《创世记》--概述
- 一件袍子
- 《资本论》网课笔记
- Python快速统计文件中高频词
- 技术所带来的生产率提升,将会大大提高资本要素回报率
- 儿时经典电影回顾,你看过几部?
- 【ART-PI】STM32H750XBH6 - 入手篇
- rgb颜色域与饱和度的关系
- STM32单片机RGB红蓝调光植物补光系统红光蓝光PWM调色调节亮度
- 刀片服务器改台式电脑_刀片服务器安装指南_IT /计算机_信息
- e9000刀片服务器文档,Tecal-E9000刀片服务器交换模块.doc
- 东方式插花注重花材所表达的内容美
- 360随身WiFi在没有网络的情况下打开热点
- 西南民族大学第十届校赛(同步赛)ABCEHJM题解
- RockyLinux9.0系统在VMware虚拟机上【保姆级】安装步骤,并修改网络配置,使用固定IP进行SSH连接【47张过程图】
- vue3项目使用Element Plus icon库:统一导入、全局注册组件
- crash中使用list遍历结构体
- 一种技能的形成有哪些阶段?
详解css设置默认字体相关推荐
- 详解CSS设置默认字体样式
浏览器默认的样式往往在不同的浏览器.不同的语言版本甚至不同的系统版本都有不同的设置,这就导致如 果直接利用默认样式的页面在各个浏览器下显示非常不一致,于是就有了类似YUI的reset之类用来尽量重写浏 ...
- [转]解析CSS设置默认字体样式
默认字体样式会因为浏览器不同,版本不同,甚至操作系统不同的设置不同导致如果直接利用默认样式的页面在各个浏览器下显示非常不一致,于是就有了类似YUI的reset之类用来尽量重写浏览器的默认设置保证各个浏 ...
- css字体像素教程,详解CSS中的字体属性的使用
字体族 font-family 示例: CSS Code复制内容到剪贴板 h2 {font-family:times,serif;} 注意:如果一个字体名多于一个单词(有空格),应该加上引号. 例如: ...
- UE4 C++入门之路4-PostInitProperties函数详解(设置属性默认值的四种方法)
PostInitProperties函数详解 前言 设置属性默认值的四种方法 一 声明时赋值 二 构造函数赋值 三 构造函数初始化列表 四 PostInitProperties 前言 也许在工作或者学 ...
- inline-block是html5,详解CSS display:inline-block的应用
本文详细描述了display:inline-block的基础知识,产生的问题和解决方法以及其常见的应用场景,加深了对inline-block应用的进一步理解. 基础知识 display:inline- ...
- 详解CSS display:inline-block的应用(转)
详解CSS display:inline-block的应用 阅读目录 基础知识 inline-block的问题 inline-block的应用 总结 本文详细描述了display:inline-blo ...
- 详解css中的em单位
文章目录 详解CSS中的em单位 解释 Examp-01 源码 Example-02 源码: 详解CSS中的em单位 css中的长度单位有很多,可谓五花八门,而下面本篇文章就来给大家介绍一下em单位. ...
- CSS中line-height属性详解(CSS之四)
CSS中line-height属性详解 基本概念 line-height,又称行高,指的是两行文字基线之间的距离,又可以称为这行文字所占的高度. 图中两行基线之间的距离就是行高,基线相关可以查看CSS ...
- float属性html,详解CSS样式中的float属性
详解CSS样式中的float属性.float是 css 样式的定位属性.我们在印刷排版中,文本可以按照需要围绕图片.一般把这种方式称为"文本环绕".在网页设计中,应用了CSS的fl ...
最新文章
- 谈谈机器学习的基本问题,不谈数学!
- 青蛙跳台阶问题——剑指offer
- 《R语言编程艺术》——2.5 使用all()和any()
- reportviewer控件mysql_如何将数据表绑定到ReportViewer运行时
- cad指定服务器名称,配置网络许可服务器 | AutoCAD 2022 | Autodesk Knowledge Network
- 新买的锅要怎么处理?-新锅开锅处理
- pHp中文网零基础,零基础编程
- js中执行到一个if就停止的代码_Node 中如何引入一个模块及其细节
- 只靠可视化大屏,做不了数字化,数据总监总结3点,你做到了几个
- java网络编程TCP传输—流操作—拿到源后的写入动作
- Android Thread 官方说明
- DE12 Continuation: General Theory for Inhomogeneous ODEs
- 【重点:DP 双指针 栈】LeetCode 42. Trapping Rain Water
- ul 中的li取值问题
- python16_day14【jQuery】
- 统一认证 ldap mysql_LDAP简述及统一认证说明
- python爬取豆瓣电影top250并保存为xlsx_批量抓取豆瓣电影TOP250数据
- 设计模式 策略模式(Strategy)介绍和使用
- 如何理解ANOVA中的F值与P值
- Cursor——ChatGPT的替代品【笔记】
热门文章
- Python StringIO与cStringIO
- wireshark使用及过滤器介绍
- [附源码]计算机毕业设计springboot家庭医生签约服务管理系统
- 解决Node Sass could not find a binding for your current environment: Windows 64-bit with Node.js 14.x
- NumPy的矩阵表示方法
- 2021年从事Linux运维云计算前景如何?
- 从表征到行动---意向性的自然主义进路(续一)
- 打开Docx文件的方法
- android 动态渐变,Android 动态修改渐变 GradientDrawable
- cydia无法安装卸载插件_ios9越狱后怎么装插件?cydia安装卸载插件图文教程[多图]...