CSS中字体单位

PX特1）IE无法调整那些使用px作为单位的字体小；2）国外的部分能够调整的原因在于其使用了em或rem作为字体单位；3）Firefox能够调整px和em，rem，但96%以上的网民使用IE浏览器(或内核)。

px像素（Pixel）。

相对长度单位。

像素px相对于显示器屏幕分辨率而言的。

(引自CSS2.0手册)em相对长度单位。

相对于当前对象内文本的字体尺寸。

如当前对行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸。

(引自CSS2.0手册)任意浏览器的默认字体高都16px。

所有未经调整的浏览器都符合:1em=16px。

那么12px=0.75em,10px=0.625em。

为了简化font-size的换算，需要在css中的body选择器中声明Font-size=62.5%，这就使em值变为16px*62.5%=10px,这样12px=1.2em,10px=1em,也就说只需要将你的原来的px数值除以10，然后换上em 作为单位就行了。

EM特1）em的值并不固定的；2）em会继承父级元素的字体小。

rem特remCSS3新增的一个相对单位（rootem，根em），这个单位引起了广泛。

这个单位与em有什么区别呢？区别在于使用rem为元素设定字体小时，仍然相对小，但相对的只HTML根元素。

这个单位可谓集相对小和小的优于一身，通过它既可以到只根元素就成比例地调整所有字体小，又可以避免字体小逐层复合的连锁反应。

目前，除了IE8及更早版本外，所有浏览器均已支持rem。

对于不支持它的浏览器，应对方法也很简单，就多写一个单位的声明。

这些浏览器会忽略用rem设定的字体小。

1。

css常用字体样式
CSS中常用的字体样式包括以下几种：
1.字体类型：使用font-family属性来指定字体类型，例如"微软雅黑"、"宋体"、"Times New Roman"等。

2.字体大小：使用font-size属性来指定字体大小，可以使用像素值、百分比、em等单位来指定。

3.字体颜色：使用color属性来指定字体颜色，可以直接输入颜色值或使用预定义的颜色名称。

4.字体粗细：使用font-weight属性来指定字体的粗细程度，可以使用正常、粗体、更粗等关键字或数字值（100-900）来指定。

5.字体斜体：使用font-style属性来指定字体的斜体样式，可以使用normal、italic、oblique等关键字来指定。

此外，还可以使用一些其他字体样式属性，例如行高（line-he ight）、字母间距（letter-spacing）、文字装饰（text-decorati on）等。

CSS标签大全（最终整理版）字体属性：(font)大小font-size: x-large;(特大) xx-small;(极小) 一般中文用不到，只要用数值就可以，单位：PX、PD样式font-style: oblique;(偏斜体) italic;(斜体) normal;(正常)行高line-height: normal;(正常) 单位：PX、PD、EM粗细font-weight: bold;(粗体) lighter;(细体) normal;(正常)变体font-variant: small-caps;(小型大写字母) normal;(正常)大小写text-transform: capitalize;(首字母大写) uppercase;(大写) lowercase;(小写) none;(无)修饰text-decoration: underline;(下划线) overline;(上划线) line-through;(删除线) blink;(闪烁)常用字体：(font-family)"Courier New", Courier, monospace, "Times New Roman", Times, serif, Arial, Helvetica, sans-serif, Verdana背景属性：(background)色彩background-color: #FFFFFF; 图片background-image: url();重复background-repeat: no-repeat; 滚动background-attachment: fixed;(固定) scroll;(滚动)位置background-position: left(水平) top(垂直); 简写方法background:#000 url(..) repeat fixed left top;区块属性：(Block)字间距letter-spacing: normal; 数值对刘text-align: justify;(两端对齐) left;(左对齐) right;(右对齐) center;(居中)缩进text-indent: 数值px;垂直对齐vertical-align: baseline;(基线) sub;(下标) super;(下标) top; text-top; middle; bottom; text-bottom;词间距word-spacing: normal; 数值空格white-space: pre;(保留) nowrap;(不换行)显示display:block;(块) inline;(内嵌) list-item;(列表项) run-in;(追加部分) compact;(紧凑) marker;(标记) table; inline-table; table-raw-group; table-header-group; table-footer-group; table-raw; table-column-group; table-column; table-cell; table-caption;(表格标题)方框属性：(Box)width:; height:; float:; clear:both; margin:; padding:; 顺序：上右下左边框属性：(Border)border-style: dotted(点线); dashed(虚线); solid(实线); double(双线); groove(槽线); ridge;(脊状) inset;(凹陷) outset;border-width:; 边框宽度border-color:#;边框颜色简写方法border：width style color;列表属性：(List-style)类型list-style-type: disc;(圆点) circle;(圆圈) square;(方块) decimal;(数字) lower-roman;(小罗码数字) upper-roman; lower-alpha; upper-alpha;位置list-style-position: outside;(外) inside; 图像list-style-image: url(..);定位属性：(Position)Position: absolute; relative; static; visibility: inherit; visible; hidden;overflow: visible; hidden; scroll; auto; clip: rect(12px,auto,12px,auto) (裁切) css属性代码大全一CSS文字属性：color : #999999; /*文字颜色*/ font-family : 宋体,sans-serif; /*文字字体*/font-size : 9pt; /*文字大小*/ font-style:itelic; /*文字斜体*/font-variant:small-caps; /*小字体*/ letter-spacing : 1pt; /*字间距离*/line-height : 200%; /*设置行高*/ font-weight:bold; /*文字粗体*/vertical-align:sub; /*下标字*/ vertical-align:super; /*上标字*/ text-decoration:line-through; /*加删除线*/ text-decoration: overline; /*加顶线*/text-decoration:underline; /*加下划线*/ text-decoration:none; /*删除链接下划线*/text-transform : capitalize; /*首字大写*/ text-transform : uppercase; /*英文大写*/text-transform : lowercase; /*英文小写*/ text-align:right; /*文字右对齐*/text-align:left; /*文字左对齐*/ text-align:center; /*文字居中对齐*/text-align:justify; /*文字分散对齐*/ vertical-align属性vertical-align:top; /*垂直向上对齐*/ vertical-align:bottom; /*垂直向下对齐*/vertical-align:middle; /*垂直居中对齐*/ vertical-align:text-top; /*文字垂直向上对齐*/vertical-align:text-bottom; /*文字垂直向下对齐*/二、CSS边框空白padding-top:10px; /*上边框留空白*/ padding-right:10px; /*右边框留空白*/padding-bottom:10px; /*下边框留空白*/ padding-left:10px; /*左边框留空白*/三、CSS符号属性：list-style-type:none; /*不编号*/ list-style-type:decimal; /*阿拉伯数字*/list-style-type:lower-roman; /*小写罗马数字*/ list-style-type:upper-roman; /*大写罗马数字*/list-style-type:lower-alpha; /*小写英文字母*/ list-style-type:upper-alpha; /*大写英文字母*/list-style-type:disc; /*实心圆形符号*/ list-style-type:circle; /*空心圆形符号*/list-style-type:square; /*实心方形符号*/ list-style-image:url(/dot.gif); /*图片式符号*/list-style-position: outside; /*凸排*/ list-style-position:inside; /*缩进*/四、CSS背景样式：background-color:#F5E2EC; /*背景颜色*/background:transparent; /*透视背景*/ background-image : url(/image/bg.gif); /*背景图片*/ background-attachment : fixed; /*浮水印固定背景*/ background-repeat : repeat; /*重复排列-网页默认*/ background-repeat : no-repeat; /*不重复排列*/ background-repeat : repeat-x; /*在x轴重复排列*/ background-repeat : repeat-y; /*在y轴重复排列*/指定背景位置background-position : 90% 90%; /*背景图片x与y轴的位置*/ background-position : top; /*向上对齐*/ background-position : buttom; /*向下对齐*/ background-position : left; /*向左对齐*/ background-position : right; /*向右对齐*/ background-position : center; /*居中对齐*/五、CSS连接属性：a /*所有超链接*/a:link /*超链接文字格式*/ a:visited /*浏览过的链接文字格式*/ a:active /*按下链接的格式*/ a:hover /*鼠标转到链接*/鼠标光标样式：链接手指CURSOR: hand 十字体cursor:crosshair箭头朝下cursor:s-resize 十字箭头cursor:move箭头朝右cursor:move 加一问号cursor:help箭头朝左cursor:w-resize 箭头朝上cursor:n-resize箭头朝右上cursor:ne-resize 箭头朝左上cursor:nw-resize文字I型cursor:text 箭头斜右下cursor:se-resize箭头斜左下cursor:sw-resize 漏斗cursor:wait光标图案(IE6) p {cursor:url("光标文件名.cur"),text;}六、CSS框线一览表：border-top : 1px solid #6699cc; /*上框线*/ border-bottom : 1px solid #6699cc; /*下框线*/ border-left : 1px solid #6699cc; /*左框线*/ border-right : 1px solid #6699cc; /*右框线*/以上是建议书写方式,但也可以使用常规的方式如下:border-top-color : #369 /*设置上框线top颜色*/ border-top-width :1px /*设置上框线top宽度*/ border-top-style : solid/*设置上框线top样式*/其他框线样式solid /*实线框*/ dotted /*虚线框*/ double /*双线框*/ groove /*立体内凸框*/ridge /*立体浮雕框*/ inset /*凹框*/ outset /*凸框*/七、CSS表单运用：八、CSS边界样式：margin-top:10px; /*上边界*/ margin-right:10px; /*右边界值*/ margin-bottom:10px; /*下边界值*/ margin-left:10px; /*左边界值*/CSS 属性：字体样式(Font Style)序号中文说明标记语法1 字体样式{font:font-style font-variant font-weight font-size font-family}2 字体类型{font-family:"字体1","字体2","字体3",...}3 字体大小{font-size:数值|inherit| medium| large| larger| x-large| xx-large| small| smaller| x-small| xx-small}4 字体风格{font-style:inherit|italic|normal|oblique}5 字体粗细{font-weight:100-900|bold|bolder|lighter|normal;}6 字体颜色{color:数值;}7 阴影颜色{text-shadow:16位色值}8 字体行高{line-height:数值|inherit|normal;}9 字间距{letter-spacing:数值|inherit|normal}10 单词间距{word-spacing:数值|inherit|normal}11 字体变形{font-variant:inherit|normal|small-cps }12 英文转换{text-transform:inherit|none|capitalize|uppercase|lowercase}13 字体变形{font-size-adjust:inherit|none}14 字体{font-stretch:condensed|expanded|extra-condensed|extra-expanded|inherit|narrower|normal| semi-condensed|semi-expanded|ultra-condensed|ultra-expanded|wider}文本样式(Text Style)序号中文说明标记语法1 行间距{line-height:数值|inherit|normal;}2 文本修饰{text-decoration:inherit|none|underline|overline|line-through|blink}3 段首空格{text-indent:数值|inherit}4 水平对齐{text-align:left|right|center|justify}5 垂直对齐{vertical-align:inherit|top|bottom|text-top|text-bottom|baseline|middle|sub|super}6 书写方式{writing-mode:lr-tb|tb-rl}背景样式序号中文说明标记语法1 背景颜色{background-color:数值}2 背景图片{background-image: url(URL)|none}3 背景重复{background-repeat:inherit|no-repeat|repeat|repeat-x|repeat-y}4 背景固定{background-attachment:fixed|scroll}5 背景定位{background-position:数值|top|bottom|left|right|center}6 背影样式{background:背景颜色|背景图象|背景重复|背景附件|背景位置}框架样式(Box Style)序号中文说明标记语法1 边界留白{margin:margin-top margin-right margin-bottom margin-left}2 补白{padding:padding-top padding-right padding-bottom padding-left}3 边框宽度{border-width:border-top-width border-right-width border-bottom-width border-left-width}宽度值：thin|medium|thick|数值4 边框颜色{border-color:数值数值数值数值}数值：分别代表top、right、bottom、left颜色值5 边框风格{border-style:none|hidden|inherit|dashed|solid|double|inset|outset|ridge| groove}6 边框{border:border-width border-style color}上边框{border-top:border-top-width border-style color}右边框{border-right:border-right-width border-style color}下边框{border-bottom:border-bottom-width border-style color}左边框{border-left:border-left-width border-style color}7 宽度{width:长度|百分比| auto}8 高度{height:数值|auto}9 漂浮{float:left|right|none}10 清除{clear:none|left|right|both}分类列表序号中文说明标记语法1 控制显示{display:none|block|inline|list-item}2 控制空白{white-space:normal|pre|nowarp}3 符号列表{list-style-type:disc|circle|square|decimal|lower-roman|upper-roman|lower-alpha|upper-alpha|none}4 图形列表{list-style-image:URL}5 位置列表{list-style-position:inside|outside}6 目录列表{list-style:目录样式类型|目录样式位置|url}7 鼠标形状{cursor:hand|crosshair|text|wait|move|help|e-resize|nw-resize|w-resize|s-resize|se-resize|sw-resize} word-wrap 是控制换行的。

CSS中的font-size属性使⽤教程基本语法结构：Font-size+字体⼤⼩数值+单位单词：font-size语法：font-size : absolute-size | relative-size | length取值：xx-small | x-small | small | medium | large | x-large | xx-largexx-small:最⼩x-small:较⼩small:⼩medium:正常(默认值)，根据字体进⾏调整large:⼤x-large:较⼤xx-large:最⼤也可取具体长度单位值可⽤的单位有⼏种不同的⽅法可以在CSS中声明字体⼤⼩。

总的来说，这些单位分为两类——相对和绝对。

绝对单位（⼤多）是固定的，并且涉及到⼀些物理的测量。

他们⼀旦被声明，将不能通过改变其他元素的字体⼤⼩来改变他的⼤⼩。

相对单位没有⼀个客观的测量。

相反，它们的实际⼤⼩是通过⽗元素的尺⼨来确定的。

这意味着他们的⼤⼩可以通过改变相关元素的⼤⼩来改变。

下⾯是⼀些单位的概要描述——在这⾥你可以看到单位的详细列表，但我将专注于我认为最常⽤的单位——px, pt, %, em, rem, 和 vw。

他们有什么区别？这些单位之间的差异可能很难通过概念理解，所以最好的⽅式就是通过例⼦来展⽰他们之间的差异。

例⼦1——默认设置在⼀个空⽩的HTML⽂档内，你没有任何关于字体⼤⼩的声明⽽只使⽤默认设置。

在⼤多数浏览器上为html和body标签的默认字体⼤⼩为100%。

这等同于如下算式——CSS Code复制内容到剪贴板1. 100% = 1em = 1rem = 16px = 12pt这意味着如果你为⼀个<p>标签设置字体⼤⼩为100%，另⼀个<p>为16px，他们将以相同的⼤⼩呈现在屏幕上。

你可以在这⾥看到这个证明——例⼦2——绝对单位VS相对单位绝对和相对单位之间的差异可以通过改变html的字体⼤⼩来突出显⽰。

css中⼀些常⽤的font-size字体单位和line-height详解px(pixel)像素相信⼤家对像素这个名词并不陌⽣,接下来来介绍下这个单位的⼀些⼩知识点:pixel 是 picture(图⽚)和element(元素)这两个词组成的.pixel不是绝对的⾃然长度单位,例如同样1 px的尺⼨在不同设备上的"⾃然长度"是不⼀样的.当你放⼤⼀个图⽚后会发现图⽚是由⼀个个⼩⽅块组成,每个⼩⽅块就是1px,放⼤的程度越⼤1px的⾃然长度越⼤. 因此同样的⼀个⾃然长度的图⽚⾥⾯包含的像素越多,这个图⽚就越清晰.em相对于当前对象内⽂本的字体尺⼨.也可以理解为是⼀个百分⽐单位, 1em=100%.那么来介绍下在css样式中em呈现的是什么样的效果吧:如果当前⼦元素没有设置字体⼤⼩(浏览器默认字体⼤⼩为16px),那么⼦元素设置字体⼤⼩:font-size:1em;,这时候⼦元素的字体⼤⼩就为⽗元素的100% x 16px= 16px; 以此类推,font-size:1.5em;,⼦元素字体⼤⼩就为24px;p{font-size:1.5em;}div{font-size:1.5em;}<div><p>字体⼤⼩</p></div>这⾥的 "字体⼤⼩"就是1.5 x 1.5 x 16=36px⽗元素的字体⼤⼩会继承给⼦元素,但是继承的是px值,不是em的值.怎么理解呢?body{2em}<body><div><p></p></div></body>那么body⾥⾯的⼦元素div 和 p 都是32px(不叠加)rem虽然同样是相对于字体⼤⼩的百分⽐,与em相似,但是参照对象不同.rem的参照对象不是⽗元素,因此⽆论⽗元素如何变化当前设置rem的元素字体⼤⼩并不会有响应.rem是相对于根元素(也就是html)值改变的.当我们书写html⽂档时,head和body 都是被<html></html>标签包裹的.在css样式中我们同样可以更改html的font-sizehtml{font-size:10px;}div{font-size:2rem;}此时,div的字体⼤⼩是20px;在css样式中line-height直接书写数字对于font-size来说这种做法是错误的,并不会响应.但是line-height除了有以上的单位设置以外,还可以不设置单位,直接书写数字.在line-height中em 同样是相对于当前字体⼤⼩的⼀个⽐例,并且继承的是px固定值,⼦元素不会继承em的值.但是line-height:2;是可以继承的, ⼦元素继承这个后, line-height值是当前字体⼤⼩的两倍.总结到此这篇关于css中⼀些常⽤的font-size字体单位和line-height的⽂章就介绍到这了,更多相关css font-size 和line-height内容请搜索以前的⽂章或继续浏览下⾯的相关⽂章，希望⼤家以后多多⽀持！。

CSS单位中px、em和rem的区别js实现rem单位换算1. CSS单位中绝对长度与相对长度2. px介绍与优缺点3. em介绍与优缺点4. rem介绍与优缺点5. 总结CSS单位中绝对长度与相对长度css单位中分为相对长度单位、绝对长度单位。

绝对长度：cm、mm、in、px、pt、pc相对长度：em、ex、ch、rem、vw、vh、vmin、vmax、%浏览器对各单位的⽀持情况：平时我们常⽤的单位主要是rem、em和px，为了便于区分它们的使⽤场景，我们在此进⾏详细的讲解。

px介绍与优缺点px，像素（Pixel），是绝对长度单位，会继承上级标签元素的⼤⼩。

也有说px是相对长度单位，这是因为像素px是相对于显⽰器屏幕分辨率⽽⾔的，在缩放页⾯时⽆法调整那些使⽤它作为单位的字体、按钮等的⼤⼩，但兼容性较好。

⼀般电脑的分辨率有{1024768}，{1280768}，{1920*1024}等不同的分辨率。

1920*1024 前者是屏幕宽度总共有1920个像素宽度后者则是⾼度为1024个像素。

我们可以换种简单的⽅法来记忆就是：相对：相对于devicePixelRatio，px实际显⽰的⼤⼩是不确定的。

绝对：相⽐于em，px的⼤⼩和元素的其他属性⽆关。

em介绍与优缺点em是相对长度单位，是指相对于当前对象内⽂本的字体尺⼨。

如果当前相对⾏内⽂本的字体尺⼨未被⼈为设置，则相对于浏览器的默认字体尺⼨16px，为1em=16px。

em 的值并不是固定的，会继承⽗级元素的字体⼤⼩，代表倍数；浏览器的默认字体都是16px，那么1em=16px，以此类推计算12px=0.75em，10px=0.625em，2em=32px；这样使⽤很复杂，很难很好的与px进⾏对应,也导致书写、使⽤、视觉的复杂(0.75em、0.625em全是⼩数点)；为了简化font-size的换算，我们在body中写⼊以下代码:body {font-size: 62.5%; /* 公式16px*62.5%=10px */}rem介绍与优缺点rem是css3中新增加的单位，相对的只是HTML根元素，浏览器的默认字体尺⼨也是16px。

字号、pt、px、inch、cm之间的关系及对照表[注意]字号、pt、px、inch、cm 之间的关系及对照表引⾃在印刷排版中，“point”是⼀个绝对的单位，它等于 1/72 英⼨，可以⽤尺⼦丈量的，物理的英⼨。

但在 CSS 中 pt 的含义却⾮如此，例如我们指定⼀个字体是 9pt，我们会以为按照 CSS 规范，它等于: 9 * 1/72 = 1/8 inch 这是⼀个误解，因为我们的显⽰器被分割为了⼀个个的像素，单个像素只能有⼀种颜⾊ (为了简化，这⾥暂不讨论次像素反锯齿技术)，要在屏幕上显⽰，必须先把以 pt 为单位的长度转换为以像素为单位的长度，这个转换的媒介，就是 DPI (事实上，这⾥的所谓的 DPI，是操作系统和浏览器中使⽤的术语，即为 PPI, pixels per inch，和扫描仪、打印机、数码相机中的 DPI 是不同的概念)。

例如，⽆论在哪个操作系统中，Firefox 浏览器默认的 DPI 都是 96，那么实际上 9pt = 9 * 1/72 * 96 = 12px。

所以，虽然“DPI”中的“I”和“1pt 等于 1/72 inch”中的“inch”，都不代表物理上的英⼨，但这两个单位互相之间是相等的，也就在相乘中约掉了。

那么，真实的物理长度怎么计算呢?请拿出⼀把尺⼦，丈量你的显⽰器的可见宽度 (我这⾥是 11.2992 英⼨)，除以横向分辨率 (我这⾥是 1024 像素)，得到的就是每个像素的物理长度。

现在我们可以回答这样⼀个问题，⽹页上 9pt 的字体究竟占⽤了多宽的空间?答案是: 9 * 1/72 * 96 * 11.2992 / 1024 = 0.1324 英⼨ = 0.3363 厘⽶。

CSS相对长度单位(relative length unit) CSS相对长度单位中的相对⼆字，表明了其长度单位会随着它的参考值的变化⽽变化，不是固定的。

以下是CSS相对长度单位列表：CSS相对长度单位说明em 元素的字体⾼度The height of the element's fontex 字母x的⾼度The height of the letter "x"px 像素Pixels% 百分⽐PercentageCSS绝对长度单位(absolute length unit)绝对长度单位是⼀个固定的值。

css rem用法CSS rem用法是一种相对于根元素的字体大小单位。

使用rem单位可以实现响应式网页设计，使得网页的布局和字体在不同的设备上能够自动适应。

在CSS中，rem单位是相对于根元素的字体大小计算的。

默认情况下，根元素的字体大小是16px。

例如，如果将根元素的字体大小设置为16px，那么1rem就等于16px，2rem就等于32px。

使用rem单位的好处是当用户在浏览器中改变了根元素字体大小时，整个网页的布局和字体大小都会自动适应。

这对于移动设备和桌面设备上的不同屏幕尺寸和分辨率非常有用。

要使用rem单位，首先需要在CSS文件中设置根元素的字体大小。

可以使用以下代码：```csshtml {font-size: 16px;}```接下来，使用rem单位来定义其他元素的字体大小、宽度、高度等属性。

例如：```cssh1 {font-size: 2rem;}p {font-size: 1.5rem;line-height: 2rem;}.container {width: 30rem;height: 20rem;}```在上面的示例中，h1元素的字体大小将是32px（2rem * 16px），p元素的字体大小将是24px（1.5rem * 16px），容器元素的宽度将是480px（30rem * 16px），高度将是320px（20rem * 16px）。

使用rem单位时要注意，如果在嵌套元素中使用rem单位，则rem单位是相对于父元素的字体大小计算的，而不是相对于根元素。

这可以帮助实现一些局部的字体大小调整。

总结一下，CSS rem用法是一种响应式网页设计中常用的单位。

通过设置根元素的字体大小，可以使用rem单位来实现网页的自动适应。

这种灵活的单位能够帮助开发者在不同设备上实现一致的布局和字体大小。