当前位置: 首页 > news >正文

Html 字体大小单位 px em pt

网页上定义字体大小有常见三种单位,px、em、pt

px

px是pixel缩写,是基于像素的单位.在浏览网页过程中,屏幕上的文字、图片等会随屏幕的分辨率变化而变化,一个100px宽度大小的图片,在800×600分辨率下,要占屏幕宽度的1/8,但在1024×768下,则只占约1/10。所以如果在定义字体大小时,使用px作为单位,那一旦用户改变显示器分辨率从800到1024,用户实际看到的文字就要变“小”(自然长度单位),甚至会看不清,影响浏览。 

em

em:即%,是相对单位,是一个相对长度单位,最初是指字母M的宽度,故名em。现指的是字符宽度的倍数,用法类似百分比,如:0.8em, 1.2em,2em等。通常1em=16px。,一般用来测量长度的通用单位(例如元素周转的页边空白和填充),当用于指定字体大小时,em单位是指父元素的字体大小。

在一个页面上给定了一个父元素的字体大小,这样就可以通过调整一个元素来成比例的改变所有元素大小.它可以自由缩放,比如用来制作可伸缩的样式表。

pt

PT是point(磅)缩写,是一种固定长度的度量单位,大小为1/72英寸。如果在web上使用pt做单位的文字,字体的大小在不同屏幕(同样分辨率)下一样,这样可能会对排版有影响,但在Word中使用pt相当方便。因为使用Word主要目的都不是为了屏幕浏览,而是输出打印。当打印到实体时,pt作为一个自然长度单位就方便实用了:比如Word中普通的文档都用“宋体 9pt”,标题用“黑体 16pt”等等,无论电脑怎么设置,打印出来永远就是这么大。

转换

 
浏览器的默认字体高都是16px,所以未经调整的浏览器在显示1em=16px,也就是说1px=0.0625em。为了简化font-size的换算,可以在css中的body中先全局声明font-size=62.5%也就是定义了默认字体大小为16px*0.625=10px,子元素会继承父级元素的字体大小,于是1em=10px,所以12px=1.2em。px与em的转换通过10就可以得来。但是定义font-size=0.625em或者直接定义12px,这是没有效果的,


此外有一点必须要注意,IE处理汉字时,对于浮点的取值精确度有限,由以上方法得到的12px(1.2em)大小的汉字在IE中并不等于直接用12px定义的字体大小,而是稍大一点。只要将62.5%换成63%就可以了。
 

pt和px的换算公式也比较简单,pt=px乘以3/4。


 

转载于:https://www.cnblogs.com/dolphinX/p/3237054.html

相关文章:

  • 如何调整 php 应用的上传附件大小?
  • Ubuntu14.10 更新源,现在很多源已经停用了建议使用ubuntu15以上
  • MVC3学习:实现简单的相册管理和图片管理
  • 彭旭老师《一线员工执行力提升训练》
  • 使用HTML5拍照
  • java基本数据类型
  • 中文锐推榜的优化
  • 如何下载vSphere Big Data Extensions 1.0免费试用版
  • Android深度探索读后感 第四章
  • Android官方教程翻译(4)——启动另一个Activity
  • 动态生成自定义控件ascx如何给ascx传值
  • Android UI(二)DridView的菜单
  • HTML5 预加载
  • SonarQube简介
  • ​虚拟化系列介绍(十)
  • #Java异常处理
  • 《微软的软件测试之道》成书始末、出版宣告、补充致谢名单及相关信息
  • 【402天】跃迁之路——程序员高效学习方法论探索系列(实验阶段159-2018.03.14)...
  • Apache的80端口被占用以及访问时报错403
  • el-input获取焦点 input输入框为空时高亮 el-input值非法时
  • ERLANG 网工修炼笔记 ---- UDP
  • ES10 特性的完整指南
  • ES6系统学习----从Apollo Client看解构赋值
  • JavaScript 事件——“事件类型”中“HTML5事件”的注意要点
  • Web设计流程优化:网页效果图设计新思路
  • 前言-如何学习区块链
  • 区块链分支循环
  • 驱动程序原理
  • 问:在指定的JSON数据中(最外层是数组)根据指定条件拿到匹配到的结果
  • 限制Java线程池运行线程以及等待线程数量的策略
  • 小程序开发中的那些坑
  • 学习HTTP相关知识笔记
  • 原创:新手布局福音!微信小程序使用flex的一些基础样式属性(一)
  • Python 之网络式编程
  • ​Spring Boot 分片上传文件
  • ​渐进式Web应用PWA的未来
  • #图像处理
  • $jQuery 重写Alert样式方法
  • (C语言)球球大作战
  • (java版)排序算法----【冒泡,选择,插入,希尔,快速排序,归并排序,基数排序】超详细~~
  • (编译到47%失败)to be deleted
  • (附源码)springboot高校宿舍交电费系统 毕业设计031552
  • (介绍与使用)物联网NodeMCUESP8266(ESP-12F)连接新版onenet mqtt协议实现上传数据(温湿度)和下发指令(控制LED灯)
  • (淘宝无限适配)手机端rem布局详解(转载非原创)
  • (详细版)Vary: Scaling up the Vision Vocabulary for Large Vision-Language Models
  • . ./ bash dash source 这五种执行shell脚本方式 区别
  • .bashrc在哪里,alias妙用
  • .net 使用$.ajax实现从前台调用后台方法(包含静态方法和非静态方法调用)
  • .Net 知识杂记
  • .Net环境下的缓存技术介绍
  • .NET中两种OCR方式对比
  • .so文件(linux系统)
  • /etc/fstab 只读无法修改的解决办法
  • @Autowired标签与 @Resource标签 的区别
  • [【JSON2WEB】 13 基于REST2SQL 和 Amis 的 SQL 查询分析器