文档章节

css字体

赤月三号
 赤月三号
发布于 2016/06/13 09:58
字数 813
阅读 28
收藏 2
点赞 1
评论 0

一.首先介绍一下px

px就是css中最基本的长度单位了,用px做单位基本上没什么问题,可以做到让页面按套路精确的展现!

可但是!但可是!如果全篇用px布局会暗藏一个蛋疼的问题,就是当用户和Ctrl滚页面的时候(说白了就是ctrl+,ctrl-),你会发现页面结构产生了不可预知的错乱,因此有砖家倡导使用em替代px。。。。。

二.接下来介绍一下em

如果你从上到下阅读此文,你应该已经知道了em出现的原因,下面说说em的特性,简单的讲px是绝对单位,1px就是1px,2px就是2px,以此类推,而em是相对单位,em相对的基准点就是浏览器的字体大小,浏览器默认字体大小是16px,也就是1em默认等于16px,如果你想给某个文字设定为14px,就这样写 font-size:0.875em; 公式是14/16=0.875em,如果想要15px,那么就是15/16=0.938em, 例如margin:0.938em; 依次类推,样式表都用em来写的话,就可以解决ctrl+,ctrl-时

这时候有人和我一样就会抱怨了,我的数学是体育老师教的,除以16我怎么可能算明白,那好办你可以在根节点上重定义基准字号 html {font-size:62.5%} ,此时页面基准字号就是 16px * 62.5% = 10px , 那么此时 1em = 10px,那么此时14px = 1.4em,15px=1.5em,依次类推,就算你数学是要饭的教的应该也会算了吧-。-!

可但是!但可是!问题又来了,em准确的说是相对于父节点的字号来计算的,如果自身定义了字号那么就相对自身字号来计算,举例如下:

html { font-size: 100%; }.box-0 {    height: 1em; /* 此时height等于16px */}.box-1 {     font-size: 0.625em; /* 此时基准字号以变更为16*0.625=10px */     height: 1em; /* 此时实际height等于10px */}

看明白了吧,在整个页面内1em并不是一个固定不变的值,1em不停的变换,再加上数学是体育老师教的,这不是自作孽吗。。。没关系,css3为我们引入一个新的单位就是rem可以解决这个问题

三.最后介绍一下主角rem

rem和em一样也是一个相对单位,为了方便理解,我们就理解rem为root em,顾名思义rem只相对跟节点计算,这就是说只要在根节点设定好参考值,那么全篇的1rem都相等,计算方式同em,默认1rem=16px; 同理你可以设定html { font-size:62.5% } 那么1rem就等于10px,以此类推。。。

声明一下:rem是css3属性,没错!这就是说屌丝ie678不支持rem属性,只有chrome、firefox等高富帅支持!那么我们就在ie678中用px做兼容处理,例如:

.box {    font-size: 14px; /* 用来兼容ie678 */    font-size: 0.875em; }

 0101后花园使用的WordPress 3.5.1所引用的style.css正是使用的这种方式。

由于作者的语文也是体育老师教的,所以有言语不通之处敬请见谅,还请指正!3Q!

造成的页面错乱问题,常用em

© 著作权归作者所有

共有 人打赏支持
赤月三号
粉丝 18
博文 111
码字总数 42672
作品 0
昌平
前端工程师
Zimbra的Web客户端国际字体的控制机制及定制方法

前些日子,在论坛中提出了一个“关于开发Zimbra增补程序的设想”,有开客提到如何在Zimbra的Web界面中加入更多的中文字体。今天花了些时间 研究了一下,经初步测试,成功添加了“微软雅黑”字...

红双囍 ⋅ 2011/04/16 ⋅ 0

响应式Web设计——自定义网页字体

多年来我们一直被迫使用一组单调乏味的Web安全字体。当网页设计中确实需要一些优雅的字体时,我们通常都是使用图片来替代,并对元素使用text-indent规则将实际的文本移出视口范围。 曾有一些...

生气的散人 ⋅ 2013/03/07 ⋅ 4

div css页面如何提高用户体验 和 chrome浏览器CSS字体大小小于12px不起作用解决方法

提高用户体验度可以增加流量、增加用户在你网页停留时间、提高成交转化率等。 提高用户体验度首先是需要设计适合用户体验的网页美工图。有了合适的美工图,在后续的CSS切图布局时候才能按照网...

名字已被取 ⋅ 2016/03/08 ⋅ 0

【翻译】如何创建Ext JS暗黑主题之二

原文:How to Create a Dark Ext JS Theme– Part 2 我已经展示了如何去开发一个精致的暗黑主题,看起来就像Spotify。在本文的第一部分,了解了Fashion、Sencha Inspector、主题和变量。在第...

tianxiaode2008 ⋅ 2015/07/22 ⋅ 0

求解!!字体为什么会模糊

想引用一个很炫的弹出框样式,下载源码下来发现他的CSS有两个文件 default.css是主页面的样式,component.css是弹出框的样式 自己写的只引用了component.css,因为defunct.css用不上 然后发现...

Clavis ⋅ 2014/03/25 ⋅ 0

CSS 文本样式[上]

字体总汇 字体设置 Web字体 通过文本样式的设置,更改字体的大小、样式以及文本的方位。 一、字体总汇 CSS文本样式表如下: 二、字体设置 我们可以通过CSS文本样式来修改字体的大小、样式以及...

xiaoxiaobukuang ⋅ 2017/10/26 ⋅ 0

通过css实现网页调用服务器端字体

通过css实现网页调用服务器端字体 使用@font-face调用服务器端字体的代码,我们先来看看css2手册中是怎么定义的: 以下是代码片段: 语法: @font-face { font-family : name ; src : url( u...

青铜骑士 ⋅ 2013/12/12 ⋅ 0

CSS: 引用字体文件,以及字体图标的使用

css文件(fonts.css)中引用字体文件: @font-face { font-family: 'bbBUS'; src: url('texticon.eot'); /IE9/ src: url('texticon.eot?#iefix') format('embedded-opentype'), url('textico......

issac宝华 ⋅ 2016/05/13 ⋅ 0

BPM实例分享:如何设置表单字体样式

系统版本:V10.0 一些业务场景中,时尔需要改变表单字体 那如何设置表单字体样式? 本文将会针对全局表单和单个表单进行阐述! 1、全局表单: 修改WFRESCSSMvcSheet.css ,在body节点里面增加...

lwl_BPM ⋅ 2017/06/12 ⋅ 0

CSS3:@font-face的使用

首先你应该去网站下载一些你想要的图标字体,推荐在这里下载http://ued.alimama.com/fonts/ 在你下载的文件夹icon里就会有四个文件,如下图: ps:这四个文件分别是为了兼容各种浏览器 然后你...

唐俊- ⋅ 2013/12/08 ⋅ 3

没有更多内容

加载失败,请刷新页面

加载更多

下一页

Spring表达式语言(SpEL)

1、SpEL引用 Spring EL在bean创建时执行其中的表达式。此外,所有的Spring表达式都可以通过XML或注解的方式实现。下面将使用Spring表达式语言(SpEL),注入字符串,整数,Bean到属性。 SpEL的...

霍淇滨 ⋅ 25分钟前 ⋅ 0

Gradle使用阿里云镜像

gradle 生命周期中有一个初始化( Initialization )的过程,这个过程运行在 build script 之前,我们可以在这个地方做一点系统全局的设置,如配置仓库地址。 你可以在以下几个位置实现仓库地址...

明MikeWoo ⋅ 33分钟前 ⋅ 0

appium+python3.6

1.安装jdk1.8(不知道为啥只识别1.8,1.10不识别,所以为了少折腾,迁就安装1.8) http://www.oracle.com/technetwork/java/javase/downloads/jdk8-downloads-2133151.html 配置 JAVA_HOME:...

Kampfer ⋅ 51分钟前 ⋅ 0

详解Apache 日志分割教程

一、日志切割 安装cronolog CentOS 5.3中编译安装Apache日志默认是不切割的,需要用用工具Cronnolog进行日志切割。 1.下载及安装 wget http://cronolog.org/download/cronolog-1.6.2.tar.gz ...

dragon_tech ⋅ 54分钟前 ⋅ 0

Keepalived介绍

负载均衡器(Load Balancer, LB )是一组能够将IP数据流以负载均衡形式转发到多台物理服务器的集成软件。有硬件负载均衡器和软件负载均衡器之分,硬件负载均衡器主要是在访问网络和服务器之间...

寰宇01 ⋅ 54分钟前 ⋅ 0

java8-Collections and Streams

stream和集合的区别是什么? 1.在计算的时候处理不同, 2.every element should be computed in the memory and then to be part of collections stream Stream apis filter with a predica......

writeademo ⋅ 59分钟前 ⋅ 0

Confluence 6 重新获得附件指南

每一个文件在恢复上传到 Confluence 的时候必须单独重命名,你可以通过下面说明的 3 个方法中选择一个进行操作: 选择 A - 通过文件名恢复附件 如果你知道你需要恢复的每一个文件名,尤其是你...

honeymose ⋅ 今天 ⋅ 0

【每天一个JQuery特效】根据状态确定是否滑入或滑出被选元素

主要效果: 本文主要采用slideToggle()方法实现以一行代码同时实现以展开或收缩的方式显示或隐藏被选元素。 主要代码如下: <!DOCTYPE html><html><head><meta charset="UTF-8">...

Rhymo-Wu ⋅ 今天 ⋅ 0

度量.net framework 迁移到.net core的工作量

把现有的.net framework程序迁移到.net core上,是一个非常复杂的工作,特别是一些API在两个平台上还不能同时支持。两个类库的差异性,通过人工很难识别全。好在微软的工程师们考虑到了我们顾...

李朝强 ⋅ 今天 ⋅ 0

请不要在“微服务”的狂热中迷失自我!

微服务在过去几年一直是一个非常热门的话题(附录1)。何为“微服务的疯狂”,举个例子: 众所周知,Netflix在DevOps上的表现非常棒。Netfix可以做微服务。因此:如果我做微服务,我也将非常...

harries ⋅ 今天 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部