`
jordan_micle
  • 浏览: 245678 次
  • 性别: Icon_minigender_1
  • 来自: 广州
社区版块
存档分类
最新评论

样式中文字大小px、pt、em的区别

阅读更多

在网页设计、样式代码编程过程中经常用到的设置字体大小的有px、pt、em等,本篇文字主要说说这三者的区别。

基本概念:
px 就是表示pixel,像素,是屏幕上显示数据的最基本的点,最小单位;

pt就是point,是印刷行业常用单位,等于1/72英寸。 

em, 其实就是%,从这个概念上看,em才是真正的“相对单位”。 

px是一个点,它不是自然界的长度单位,谁能说出一个“点”有多长多大么? 可以画的很小,也可以很大。如果点很小,那画面就清晰,我们称它为“分辨率高”,反之,就是“分辨率低”。所以,“点”的大小是会“变”的,也称为“相对 长度”。

pt全称为point,但中文不叫“点”,确切的说法是一个专用的印刷单位“磅”,大小为1/72英寸。所以它是一个自然界标准 的长度单位,也称为“绝对长度”。 

px会随显示器的分辨率而改变,pt会随Windows系统字体大小设置而改变。

设 置Windows系统字体大小:桌面上右键 > 属性 > 设置 > 高级 > 常规 > DPI 设置,默认的是“正常尺寸96DPI”,你可以自定义修改。

px和pt的使用区别,只有当用户改变默认的96DPI下才会产生:使用px 定义文字,无论用户怎么设置,都不会改变大小;使用pt定义文字,当用户设置超过96DPI的值,数值越大,字体就越大。 

转换计算公 式:px = pt * DPI / 72

在网页设计中,面向用户的屏幕的基本单位是px,因此使用px作为单位是最简单也最容易理解 的,而pt也不过是通过了Windows的设置乘上了一个比率转变成px再显示,算是绕了个圈子。参考大部分大型网站,包括Adobe和 Microsoft,都是使用px作为单位,而且在HTML中,默认的单位就是px。

但在Word或Photoshop中,使用pt就相 当方便。因为使用Word和Photoshop的主要目的都不是为了屏幕浏览,而是输出打印。当打印到实体时,pt作为一个自然长度单位就方便实用了:比 如Word中普通的文档都用“宋体 9pt”,标题用“黑体 16pt”等等,无论电脑怎么设置,打印出来永远就是这么大。又或者在Photoshop中,设置一个图片中的某个艺术效果的字体是72pt大小,然后分 别将这张图片设为300DPI和72DPI,再打印出来,就可以看出,这2个字体大小完全一样,只是“清晰度”不同,300DPI更清晰。这是毫无疑问的结果。 

分享到:
评论

相关推荐

    css中的px、em、rem、pt 特点和区别及换算详解

    概念介绍: 1、px (pixel,像素):是一个虚拟长度单位,是计算机系统的数字化图像长度单位,如果px要换算成物理长度,...通常1em=16px。 3、pt (point,磅):是一个物理长度单位,指的是72分之一英寸。pt=1/72(英寸),

    详解CSS中的几种长度px、em、pt

    在CSS(层叠样式表)中,长度单位用于设置元素的尺寸,如边距、填充、字体大小等。本文将详细解析CSS中最常见的几种长度单位:px、em、pt,以及其他的长度单位如pc、in、mm、cm、ex。 首先,`px`(像素)是最常用的...

    CSS长度单位 px和pt的区别

    在Internet Explorer中,即使定义了px或pt,用户仍可以通过浏览器设置改变字体大小,而em则会根据这个设置进行相应的调整。 综上所述,px更适合用于需要在不同分辨率下保持一致视觉效果的设计,而pt更适用于希望...

    css中的长度单位(em/ex/px/pt)使用介绍

    在CSS(层叠样式表)中,长度单位是用于指定元素的大小、距离、宽度以及其他尺寸属性的基本组成要素。CSS提供了多种长度单位,用于不同的布局场景和需求。本文将详细介绍四种常用的CSS长度单位:em、ex、px和pt。 ...

    CSS中的各属性意思.docx

    字体系列可以是 serif、sans-serif、monospace 等,字体样式可以是 normal、italic、oblique 等,字体大小可以是绝对值(px、pt、cm、mm)或相对值(%、em),字体变形可以是 normal、bold、bolder、lighter 等,...

    文字缩放出现.rar文字缩放出现.rar

    可以使用绝对单位(如px、pt)或相对单位(如em、rem)来定义字体大小。百分比值允许基于父元素的字体大小进行缩放,提供了一种灵活的动态调整方式。 3. **响应式设计与文本缩放**: 在响应式网页设计中,使用媒体...

    动态调整textarea中字体的大小代码

    字体大小常使用的单位是pt(磅),但更常用的单位是px(像素)或者相对单位em和rem。在本例中,使用了pt单位来表示字体大小,这种做法在现代网页设计中已经较少使用。 7. OCR技术与识别错误:最后一段描述提到了...

    CSS样式中文语法名令完全注释.pdf

    长度单位包括 `mm`, `cm`, `in`, `pt`, `px`, `pc`, `ex`, `em`,百分比则是相对于父元素字体大小的百分比。 6. **font** 简写属性允许你一次性设置所有字体属性,顺序是 `font-style`, `font-variant`, `font-...

    css2.0样式表中文手册.rar

    10. **单位与长度**:CSS2.0中使用了各种单位,如像素(px)、百分比(%)、em、pt等,来定义元素的尺寸和间距。 这本《CSS2.0样式表中文手册》涵盖了以上所有关键概念,并可能包括更多细节和实例,对于开发者来说是一...

    HTML5&CSS3网页制作:字体样式属性.pptx

    你可以使用相对长度单位,例如`em`(相对于当前对象内文本的字体尺寸),或者使用绝对长度单位,如`px`(像素,推荐),`in`(英寸),`cm`(厘米),`mm`(毫米),`pt`(点)等。合理设置字体大小能够确保文本在不同设备上...

    Css+div_常用CSS标签及属性

    其中,em是相对于字体的font-size值的单位,ex是相对于字体中的小写x字母的高度值的单位,px是像素单位。 Css中的元素分类 在Css中,元素可以分为以下几种: * block(块级元素):包括P、H1-H6、list、div、body...

    XML与WEB Service技术(微软):第03章 CSS样式控制.ppt

    像素(px)和百分比(%)是最常用的单位,em通常用于基于父元素字体大小的比例设置元素尺寸。 2. **颜色单位**有多种表示方法,包括HEX(如`#3B04C5`)、RGB(如`rgb(255,0,0)`)、RGBA(如`rgba(255,0,0,0.5)`)、...

    CSS 2.0样式表中文手册

    6. **单位和长度(Units and Lengths)**:CSS 2.0支持多种单位,如像素(px)、百分比(%)、绝对长度(em, ex, in, cm, mm, pt, pc)等。 7. **颜色和背景(Colors and Backgrounds)**:可以使用颜色关键词、...

    怎样做网站──网页字体的设置.pdf

    在字体大小上,我们除了使用固定的pt单位外,还可以使用相对单位,如em、px等。em单位基于当前字体的大小,1em相当于100%的当前字体大小。 字体颜色也可以使用CSS进行设置: a:link { color: #0000FF } a:visited ...

    css中文排版心得

    在CSS世界中,中文排版是一项特殊的挑战,因为中文字符的特性与西文有很大区别。以下是一些关于CSS中文排版的重要知识点: 1. **文字属性设置**:要设定中文文字的样式,可以使用`font`属性。例如,`font-style`...

    网页设计与制作教程第3章 高效定制网页样式——CSS.ppt

    CSS属性值可以使用多种单位,如像素(px)、百分比(%)、相对单位(em、rem)和长度单位(in、cm、mm、pt、pc)。不同的属性可能支持不同的单位,例如,font-size通常使用px或em,而margin和padding则可以使用...

    CSS样式表(讲义)

    ### CSS样式表(讲义) #### 1. 什么是CSS? CSS,全称为 Cascading Style Sheets(层叠样式表),是一种用于控制网页外观的设计工具。它允许开发者通过编写规则来改变网页元素的视觉表现,例如字体、颜色、布局等。...

Global site tag (gtag.js) - Google Analytics