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

原文地址:https://blog.51cto.com/14592820/2484487

时间: 2024-08-11 02:21:02

web前端入门到实战:网页开发中字体,字号与尺寸对应表的相关文章

web前端入门到实战:HTML-JS中的单双引混合处理原则

Web 开发时常会遇到 链接中调用JS操作,如: <a href="#" onclick="showName('donhwa')">查看名字</a> 这里的名字? donhwa ,偶尔会带有 单引,或双引,或兼有之. 这时,又要如何调整才不会暴脚本感叹号呢? 也许你我都经常遇到,偶尔调整一阵可以了就这样过了,没有总结下来. 下面是整理了一下的结果,记录一下. <html> <head> ? ? ? ? <titl

web前端入门到实战:HTML中img标签的src属性绝对路径问题解决办法,完全解决!

HTML中img标签的src属性绝对路径问题解决办法,完全解决 需求:有时候自己的项目img的src路径需要用到本地某文件夹下的图片,而不是直接使用项目根目录下的图片. 场景:eclipse,tomcat,html,img,src,java 注意:不需要寻找tomcat真实路径下的server.xml去修改,这个地方不需要修改. 解决办法:1.在eclipse中找到你的项目发布的tomcat服务器,然后找到左侧Servers下对应的你的Tomcat服务器中的server.xml文件,如下图所示:

web前端入门到实战:CSS3中的弹性盒子模型

介绍 在css2当中,存在标准模式下的盒子模型和IE下的怪异盒子模型.这两种方案表示的是一种盒子模型的渲染模式.而在css3当中,新增加了弹性盒子模型,弹性盒子模型是一种新增加的强大的.灵活的布局方案.弹性盒子模型是css3中新提出的一种布局方案.是一种为了应对针对不同屏幕宽度不同设备的一整套新的布局方案.主要是对一个容器中的子元素进行排列.对齐和分配空白空间的方案的调整. 新旧版本的弹性盒子模型在之前,css3曾经推出过旧版本的弹性盒子模型.相对于新版本的弹性盒子模型而言,旧版本的内容与新版本

web前端入门到实战:css中颜色

颜色 如果我们相给页面设置颜色可以采用多种方法进行设置: 一.命名颜色 假设在设置页面的颜色时觉得一部分很小的颜色集中就足够了,就可以直接给定颜色的名称.CSS称这些有名称的颜色为命名颜色. 命名颜色的关键字有限,css定义了17个标准色:浅绿色,黑色,蓝色,紫红色,灰色,橙色,绿色,石灰,栗色,海军,橄榄,紫,红,银,蓝绿色,白色和黄色. 有的时候也许使用其他颜色值,并不在标准颜色之内的颜色也可以使用,它之所以能起作用,原因是大多数的web浏览器能识别多达140个颜色,包括前面说的17种颜色.

web前端入门到实战:CSS中的cursor属性

css中的cursor这个属性是用来设置光标形状的. 这个属性定义了鼠标指针放在一个元素边界范围内时所用的光标的形状. 默认值:auto 继承性:yes 出现版本:css2 JavaScript语法:object.style.cursor = 'pointer' 可以设置的值: | 值 | 描述 || url | 需使用的自定义光标的 URL. 注释:请在此列表的末端始终定义一种普通的光标,以防没有由 URL 定义的可用光标. 浏览器支持情况: IE.FireFox.Chrome.Safari.

web前端入门到实战:JavaScript中尺寸类样式

一:鼠标尺寸类样式 都要事件对象的配合 Tip:注意与浏览器及元素尺寸分开,鼠标类尺寸样式都是X,Y,浏览器及元素的各项尺寸时Height,Width 1:检测相对于浏览器的位置:event.clientX/event.clientY client:整个浏览器的可视区域,当点击鼠标的时候,鼠标事件发生的位置距离浏览器可视区域的左边和上边的距离 clientX:鼠标事件发生的位置距离浏览器可视区域的左边的距离 clientY:鼠标事件发生的位置距离浏览器可视区域的上边的距离 2:检测相对于屏幕的位

web前端入门到实战:css选择器和css文本样式相关

[文章来源微信公众号:每天学编程]---关注,后台领取编程资源 css基础-css选择器和css文本样式相关: 使用link链入外部样式,页面加载时会同时加载样式 @import url("*.css");使用导入式,页面加载完后,才会加载样式 链接伪类的顺序 :link-> :visited ->:hover-> :active 或者 : visited -> : link ->:hover-> :active 选择器的优先级: id选择器>

web前端入门到实战:html常用标签、包含关系、常用术语,以及网页设计中的字体分类

字体的分类: serif (衬线字体){在笔画上面有些特殊的修饰效果} sans-serif (非衬线字体){横平竖直.横就是横,点就是点} monospace ( 等宽字体) cursive ( 草书字体) fantasy (虚幻字体) 以上这些分类都是一些大的分类, 并没有涉及具体的类型,如果将字体指定为这些格式,浏览器会自己选择指定类型的字体.一般情况在指定字体的时候.把分类名称放到最后面当备用字体 html标签 html标签的语义: <div>,<span>没有任何默认样式

前端开发入门到实战:CSS中字体单位:px、em、rem和%

对于绘图和印刷而言,"单位"相当重要,然而在网页排版里,单位也是同样具有重要性,在CSS3普及以来,更支持了一些方便好用的单位(px.em.rem-等),这篇文章将整理这些常用的CSS单位,也帮助自己未来在使用上能更加得心应手. "网页"和"印刷"的单位若要把单位做区隔,最简单可以分为"网页"和"印刷"两大类,通常对于CSS来说只会应用到网页的样式,毕竟真正要做印刷,还是会倾向透过排版软件来进行设计. 网页