web前端入门到实战:网页开发中字体,字号与尺寸对应表
了解字体的一样常识,不管做一份文档编辑还是网页开发,都是很有必要的。整齐划一,井然有序才终是大家之道。
1.字体
在文档编辑中,我们常用的是宋体,小四号字,新罗马字体,字母和数字用的是Arial字体,段落首行缩进2个字体,采用多倍行距中的1.25倍行距。
在网页开发中,普遍偏爱微软雅黑与宋体,14/16px,非衬线体。
2.字号
印刷文字有大、小的不同变化,排版及图象处理软件中汉字字体大小的计量,前主要采用印刷业专用的号数制和点数制。其尺寸规格以正方形的汉字为准(对于长或扁的变形字,则要用字的双向尺寸参数。)
号数制:
汉字大小定为七个号数等级——按,1号、2号、3号、4号、5号、6号、7号由大至小排列。在字号等级之间又增加一些字号,并取名为“小几号字”,如“小4号””、“小5号”等等。
号数制的特点是用起来简单、方便,使用时指定字号即可,无需关心字体的实际尺;缺点是字体的大小受号的限制,有时不够用,大字无法用号数来表达,号数不能直接表达字体的实际尺寸,字号之间没有统一的倍数关系,折算起来不方便。尽管如此,号数制仍是目前表示字体规格最常用的方法。(需要注意的是,传统标准铅字的字号大小与一般字处理软件实际输出的文字尺一寸会有一些误差,这是由于字的变倍计算处理造成的。)
点数制:
是目前国际上最通行的印刷字体的计量方法。这里的“点’.不是计算机字形的“点阵”的意思,“点”是国际上计量字体大小的基本单位,从英文“Point’,译音而来,一般用小写‘p’来表示,俗称“磅”。
1磅=0.35毫米
1英寸≈72磅
1毫米≈1/25英寸
1厘米=10毫米
1英寸=25.4毫米
点 1 pt(磅)≈1/72.27英寸≈1/3毫米。
大点 1 bp ≈1/72英寸
pico 1 pc =12pt
em: 相当于当前字体的大写字母“M”的宽度。
ex: 相当于当前字体的小写字母“x”的高度。
目前排版中,点数制与号数制并存使用,互为补充,两者相互之间对应的折算关系详见下图。
专业排版字号、磅数与实际尺寸对照表:
不同字体对应的px:
八号字 5
七号字 5.5
小六 6.5
六号 7.5
小五 9
五号 10.5
小四 12
四号 14
小三 15
三号 16
小二 18
二号 22
小一 24
一号 26
小初 36
初号 42
web前端入门到实战:网页开发中字体,字号与尺寸对应表相关推荐
- web前端入门到实战:CSS中字体单位:px、em、rem和%
对于绘图和印刷而言,"单位"相当重要,然而在网页排版里,单位也是同样具有重要性,在CSS3普及以来,更支持了一些方便好用的单位(px.em.rem-等),这篇文章将整理这些常用的C ...
- web前端入门到实战:css中border-style 属性
border-style 属性用于设置元素所有边框的样式,或者单独地为各边设置边框样式.只有当这个值不是 none 时边框才可能出现. 例子 1 border-style:dotted solid d ...
- web前端入门到实战:table中cesllspacing与cellpadding的区别
table是什么?它是由一个个cell单元格构成的,在表格中,<td>的个数取决于每行中包裹的cell单元格个数!此外,默认table表格在没有添加css样式 html中常见table写法 ...
- html前端页面的基本骨架是,web前端入门到实战:css实现的骨架屏方案
web前端入门到实战:css实现的骨架屏方案 发布时间:2020-08-04 01:32:03 来源:51CTO 阅读:152 作者:前端向南 优点 简单,不需要工程,不用puppeteer生成骨架d ...
- 转圈加载html,web前端入门到实战:纯CSS实现加载转圈样式
web前端入门到实战:纯CSS实现加载转圈样式 发布时间:2020-05-27 18:11:33 来源:51CTO 阅读:134 作者:前端向南 不同的项目中对于等待加载时转圈圈的样式是不同的,有的是 ...
- web前端入门到实战:web前端开发好学吗?
随着互联网+时代的到来,移动互联网行业的发展也是突飞猛进.目前较为火热的当属Web前端开发.对于0基础想从事互联网行业的小伙伴们,Web前端开发将会是最合适的入门编程语言.无论你是否承认,这个时代已经 ...
- web前端入门到实战:纯HTML做出几个实用网页效果
在我们以往看到的页面效果中,很多效果是需要JS搭配使用的,而今天在本文中,我将介绍如何使用纯HTML打造属于自己的实用效果. **1. **折叠手风琴 使用Details和Summary标签可以创建没 ...
- html弧形列表效果,web前端入门到实战:html5网页特效-弧形菜单
效果: 弧形菜单,文字按规则变形以及变换透明度 简单的javascript,上手难度:简单 学习笔记: text-decoration: 最主要的功能就是给文字加上附着在文字底部,上方,或者中间的线( ...
- web前端入门到实战:CSS3两大实用属性,以及网页制作技巧
一.使用 :not() 在菜单上应用/取消应用边框 我们通常的做法是先给每个菜单项设置边框,然后在设置最后一个菜单的边框为零 /* add border */ .nav li {border-righ ...
最新文章
- maven添加oracle jdbc依赖
- java ssh文件下载_Java使用SSH从远程服务器下载文件
- 如何挂载另一个lvm硬盘
- 每日源码分析-Lodash(uniq.js)
- 使用WPA Supplicant在Ubuntu 18.04/19.04上从终端连接到Wi-Fi的方法
- curd操作php代码,Laravel 5.6中的CURD操作(代码示例详解)
- redis 删除操作
- bzoj4419 [Shoi2013]发微博 差分
- 异常检测2——PCA异常检测
- Map.Entry如何使用?
- @白帽子,你有一封来自2020“补天杯”破解大赛的邀请函
- 与大学生谈学习BIM软件开发所需要的准备
- Windows10查看本机连接过的WiFi密码
- 微信分享朋友圈功能开发流程详解
- C语言自学记录-Class6-函数
- JavaScript 火焰
- 论文阅读Targetless Calibration of LiDAR-IMU System Based on Continuous-time Batch Optimization(含代码解读)
- 【备品备件】入库流程--赠品入库,商贸入库和退库入库
- 随机森林算法(RandomForest)实现MNIST手写体数字识别
- 智能硬件泡沫: 巨头进场才能彻底催熟产业