首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

「css基础」一次搞懂CSS 字体单位:px、em、rem 和 %

开篇 对于绘图和印刷而言,「单位」相当重要的,然而在网页排版里,单位也是同样具有重要性,在CSS3 普及以来,更添加了一些方便好用的单位( em、rem.. .等),这篇文章将整理这些常用的CSS 单位...,使用上就应该要预先初始化字体大小,下面这两段CSS可以将所有的元素字体大小预设为16px,接下来可以进行个别调整。...,如示例展示的,指定多大 px 字体就会多大。...(浏览器预设字体大小为16px,若无特别指定则会直接继承父元素字体大小) 1.2em <div style="font-size:1.2em...熟悉了<em>字体</em>大小<em>单位</em>之后,你就更够能系统的进行设计整个网站的CSS<em>字体</em>架构,不过font-size 本身和font-family 有着一些复杂的关系,不同的font-family 有时也会影响font-size

3.6K20
您找到你想要的搜索结果了吗?
是的
没有找到

CSS:绝对单位、相对单位

% %(百分比)应该是我们最好理解的单位了,这里就不多解释了,主要有一点需要注意: 如果对 html 元素设置 font-size 为百分比值,则是以浏览器默认的字体大小16px为参照计算的(所有浏览器的默认字体大小都为...font-size 对于字体大小属性(font-size)来说,em 的计算方式是相对于父元素的字体大小,1em 等于父元素设置的字体大小。...如果父元素没有设置字体大小,则继续往父级元素查找,直到有设置大小的,如果都没有设置大小,则使用浏览器默认的字体大小。...font-size,1em 等于该元素设置的字体大小。...同理如果该元素没有设置,则一直向父级元素查找,直到找到,如果都没有设置大小,则使用浏览器默认的字体大小。

2K20

比例字体&等宽字体

我们都知道等宽字体和比例字体的区别,就在于比例字体(Monospaced Font)即每个字母宽度是按一定比例自动调整的,而等宽字体(Proportional font)则是固定宽度,固定间距,字体的每一个字母和字符所占的水平空间都是相同的...近年来制作的比例字体中,一般都会包含有较多的间距调整、斜体修正、合体字等信息 。 等宽字体:早期的打字机、电脑屏幕由于技术的限制,不能自动显示比例字体,因而最先出现的是等宽字体。...CSS单位 还有一个与等宽字体有关的css单位:ch ?...它是以字符0的宽度为基准, 另外一个单位ex是以小写字符x的高度为基准,当font-family改变的时候这两个单位的值也会变化,不同字体表现的样式不一样。...我们可以测试一下这个ch单位,当们把宽度设置为2ch的时候的表现是怎样: ? 总结:不同于比例字体,等宽字体具有相同的宽度字符。这种特点让它更易于阅读,拥有较高的统一性和一致性。

8.7K60

CSS常用单位

CSS常用单位 CSS的长度单位主要有%、px、in、cm、ch、mm、ex、pt、pc、em、rem、vw、vh、vmin、vmax,按照单位的计算方式大致可以分为绝对长度单位、相对长度单位、百分比单位...rem不是只对定义字体大小有用,可以使用rem把整个网格系统或者UI样式库基于HTML根元素的字体大小上,这将带来更加可预测的字体大小和比例缩放,实现响应式的布局。...x的高度,但不同字体x的高度可能不同,对于很多字体来说1ex ≈ 0.5em,所以很多浏览器在实际应用中取em值一半作为ex值,ex单位在实际中常用于微调。...except"> 文字 文字 ch ch与ex类似,这一单位代表元素所用字体中...% 当度量单位设置为百分比时,即可使浏览器组件宽高随着浏览器的大小相应变化。

1.4K20

揭秘PhotoShop中的点与像素

HTML5学堂:PhotoShop当中,存在着这样一个单位 —— 点。对于设计师们,估计再熟悉不过了,但是对于前端开发攻城狮们,稍有些郁闷,因为点并不会完全等于像素~!...但是同样像素的文字,字体大小保持不变。一起来看比较图: ? 如上的三组文字,“H5”均设置的是30点;“HTML5学堂”均设置的是30像素。...而前端攻城狮,通常并不会对自己的PS做首选项设置(通俗的说,就是设计师的设计文件中,字体以px为单位,而攻城狮使用PS打开文件的时候,默认字体以pt为单位。...选择菜单中的“编辑”——>“首选项”——>“单位与标尺” 然后将文字的单位选择为“像素”即可 此时原有的点会被换算为字体像素大小哦~!如图: 改变单位之前(单位使用点-pt时) ?...改变首选项中的默认字体单位 ? 改变首选项之后(文字字体单位为px) ? 本文章内容小编:HTML5学堂-利利。耗时3h~

3.5K50

【数字信号处理】基本序列 ( 基本序列列举 | 单位脉冲序列 | 单位脉冲函数 | 离散单位脉冲函数 | 单位脉冲函数 与 离散单位脉冲函数的区别 )

文章目录 一、基本序列列举 二、单位脉冲序列 1、单位脉冲函数 2、离散单位脉冲函数 3、单位脉冲函数 与 离散单位脉冲函数的区别 一、基本序列列举 ---- 基本序列 有 单位脉冲序列 单位阶跃序列...矩形序列 实指数序列 正弦序列 复指数序列 二、单位脉冲序列 ---- 单位脉冲序列 : \delta (n) = \begin{cases} 1 \ \ \ \ n = 0 \\ \\ 0 \ \...\ \ n = 1 \end{cases} 1、单位脉冲函数 单位脉冲函数 ( 单位冲击函数 ) 对应的 函数图像 如下 : 横轴是 n , 纵轴是 \delta (n) ; n = 0 时...(t) 为无穷 t = 1 时 , \delta (t) = 0 3、单位脉冲函数 与 离散单位脉冲函数的区别 单位脉冲函数 与 离散单位脉冲函数 的区别 : ① 横轴坐标为 0 的情况 :...都为 0 ; ③ 是否可实现 : 单位脉冲函数 \delta (n) 在物理上是可以实现的 ; 离散单位脉冲函数 \delta (t) 在物理上不可实现 ;

3.2K20

Oracle SQL统计各单位及其子级单位用户总数

Oracle SQL统计各单位及其子级单位用户总数 业务场景:最近帮同事写一个sql,业务是统计各个单位及其子单位用户总数,听起来是挺容易的,所以拿起键盘就是敲: select sum(t.ucount...bs.unit_code = uinfo.unit_code group by uinfo.unit_code, uinfo.unit_name) t; 不过这个只能传个顶级单位编码...,一个一个查,这样肯定很耗时,所以还是自己想太简单了,摸索了好一阵子,想到方法: ①、新建一个函数,传一个顶级单位编码,通过函数统计本单位及其子单位的用户总数 create or replace function...select FH_UNIT_USER_COUNT(uinfo.unit_code) as 用户总数, uinfo.unit_code as 单位编码, uinfo.unit_name...as 厅单位名称 from t_unit_info uinfo group by uinfo.unit_code, uinfo.unit_name order by 用户总数 desc nulls

1.1K20

CSS尺寸单位介绍

前端开发过程中,尺寸单位是我们必须用到的,下面我们对css中常见的几种尺寸单位px,em,rem,rpx进行逐一介绍 在这之前,需要先对几个概念进行普及介绍 基本概念 (以下概念读起来可能有些晦涩,如果看不懂也没关系...,但是后面要说的rem是基于em的,所以,对em进行简单介绍 em 是相对长度单位。...相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置,则相对于浏览器的默认字体尺寸。 em的值并不是固定的;em会继承父级元素的字体大小;任意浏览器的默认字体高都是16px。...我们通过浏览器查看,发现第四级的fong-size为20px; 当我们取消第三级font-size后,第三级的字体大小为40px; 所以我们说em的字体大小不是固定的,em的大小取决于父级的字体大小...这时候rem出现了 rem rem 是CSS3的一个相对单位(root em,根em) 使用rem为元素设定字体大小时,仍然是相对大小,但相对的只是HTML根元素 只要html的font-size大小不变

1.6K20

css中的单位

前端开发中, 做适配是少不了的, 即页面在各种尺寸的机型中显示效果一样, 这就用到了css中的各种长度单位, 做一下总结 在css中, 长度单位分为以下几种 绝对单位: px、in、cm、mm、pt、pc...百分比单位: vw、vh、vmin、vmax、% 相对单位: em、rem、ex、ch 各单位的介绍 px 不用过多介绍, 精确像素 in 寸 cm 厘米 mm 毫米 pt 大约1/72寸 pc 大约...vh 窗口高度为参照, 1vh为窗口高度的1% vmin 窗口的宽度和高度中较小的一个为参照,百分比 vmax 窗口的宽度和高度中较大的一个为参照, 百分比 % 以父节点为基准的百分比 em 以父节点字体大小为基准值..., 父节点字体大小为20px, 则1.5em为30px rem 以根节点字体大小为基准值, 及HTML标签的字体大小 ex 当前字体x的高度为基准, 无法确定时为0.5em ch 以当前字体0字符为基准值

1.5K20

更换网站字体为鸿蒙字体

最近刷博客的时候, 发现了一个很有感觉的字体:HarmonyOS Sans HarmonyOS Sans是华为推出的鸿蒙系统默认的字体,可以免费商用....这个字体对中文进行的优化,使得更加易读,系统字体区别于传统平面印刷字体,在智能终端的应用场景之中看起来非常干净利落,让用户阅读文字的时候更加方便....和其他字体相比起来,鸿蒙字体削弱了黑体的机械感,可以让用户明显感知到了字体笔画的优化....当时也没太注意,直到昨天在某群看到一个站点,点进去一看,感觉都不一样的,字体很是突出,真的让我明显感知到了字体笔画的优化,和其他字体相比起来,的确是削弱了黑体的机械感,字形易认,辨识度更高....于是就决定给我主题也换上这个字体看看,通过了解,需要先到官方文档下载字体.

5.4K10

字体加密 | 字体加密初认识

首先我们应该先了解一下什么是字体加密。 什么是字体加密? 网页字体是一个字形集合,而每个字形是描述字母或符号的矢量形状。...因此,特定字体文件的大小由两个简单变量决定:每个字形矢量路径的复杂程度和特定字体中字形的数量。...通俗一点,同一内容的网页字体每个字形应该都是大同小异的,我们可以通过比对字体文件的字形来确认映射的内容。 关于字体加密的描述文章实在太多了,个人建议还是看看 Google 官方关于网页字体的文章。...如何处理字体加密? 通过上面的字体加密原理图,我们大概了解到字体加密的原理。 我推荐没有搞过字体加密的朋友找个比较简单的网站练手,网上写的比较多的例子是猫眼的专业版。...猫眼的字体解密文章非常多,建议没有接触过得朋友可以先自己动手试试,咸鱼也会在之后更新字体解密系列的文章。

6.2K51

CSS尺寸单位介绍

前端开发过程中,尺寸单位是我们必须用到的,下面我们对css中常见的几种尺寸单位px,em,rem,rpx进行逐一介绍 在这之前,需要先对几个概念进行普及介绍 基本概念 (以下概念读起来可能有些晦涩,如果看不懂也没关系...,但是后面要说的rem是基于em的,所以,对em进行简单介绍 em 是相对长度单位。...相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置,则相对于浏览器的默认字体尺寸。 em的值并不是固定的; em会继承父级元素的字体大小; 任意浏览器的默认字体高都是16px。...我们通过浏览器查看,发现第四级的fong-size为20px; 当我们取消第三级font-size后,第三级的字体大小为40px; 所以我们说em的字体大小不是固定的,em的大小取决于父级的字体大小 当父级的字体大小为...这时候rem出现了 rem rem 是CSS3的一个相对单位(root em,根em) 使用rem为元素设定字体大小时,仍然是相对大小,但相对的只是HTML根元素 只要html的font-size大小不变

1.5K30
领券