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

AI权益加码!Claude Code、Cursor等20+工具免费用! 购周边限时加赠Coding Plan Lite,畅享主流AI工具!学习进阶更高效! 阅读详情

了解字体的一样常识,不管做一份文档编辑还是网页开发,都是很有必要的。整齐划一,井然有序才终是大家之道。

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 

前端之路(移动web篇) 移动web基础 移动端开发现状 移动web开发指的是需要适配移动设备的网页开发 移动web开发pc端web开发没有本质的区别,使用的还是HTML/CSS/JavaScript的技术 移动web开发pc端web开发的区别是什么? 移动端的浏览器pc端不同 谷歌浏览器 苹果浏览器、 UC浏览器 QQ浏览器 欧朋浏览器 百度手机浏览器  360安全浏览器  搜狗... 阅读详情

相关推荐

中文字体样式对照

中文字体样式对照表,一边网页制作过程中对字体的正确认识。

前端入门视频笔记 HTML5(一) P1-31

03-网页相关概念 网站是网页集合; 网页通常是HTML格式的文件,以.htm或.html后缀结尾,要通过浏览器来阅读,由文字、图片、链接、声音、视频等元素构成。 HTML(HyperText Markup Language)超文本标记语言 用来描述网页的标记语言,是一套标记标签。 网页的形成:html描述 > 浏览器解析渲染> Web页面显示 04-常用浏览器 IE、火狐(Firefox)、谷歌(Chrome)、Safari(苹果)、Opera五大浏...

wsyyyyyyy的博客 432

web端设置12以下的字体并生效

两者出来效果不同的原因是:zoom的缩放会改变元素的真实空间大小,而scale的缩放占据的原始尺寸不变,页面布局不会发生变化。web端默认最小字体12,因项目需要设置字体10像素,试了以下方法是好用的。出来效果,这样出来效果文字其他内容边距较大,不美观,建议用第一种。直接设置10出来的效果。

lishuaishuai13的博客 825

HTML常用标签和基本用法

块元素标签(行元素)和内联元素标签(行内元素) 标签在页面上会显示成一个方块。除了显示成方块,它们一般分为下面两类: 块元素:在布局中默认会独占一行,块元素后的元素需换行排列。 内联元素:元素之间可以排列在一行,设置宽高无效,它的宽高由内容撑开。 常用HTML标签 1、h1~h6: 标题标签,块元素标签,含有默认样式 表示文档的标题,除了具有块元素基本特性外,还含有默认的外边距和字体大小 &lt...

qq_39671720的博客 312

web学习(五)文本标签及样式

1.常用的文字标签 段落标签:<p> 标题标签:<h1>~<h6> 粗体/加重标签:<b>/<strong> 斜体/着重标签:<i>/<em> 上标/下标标签:<sup>/<sub>...

laFhshzmeq3的博客 1040

5号字对应的数字字号_web前端入门实战网页开发字体字号尺寸对应表...

了解字体的一样常识,不管做一份文档编辑还是网页开发,都是很有必要的。整齐划一,井然有序才终是大家之道。1.字体在文档编辑中,我们常用的是宋体,小四号字,新罗马字体,字母和数字用的是Arial字体,段落首行缩进2个字体,采用多倍行距中的1.25倍行距。在网页开发中,普遍偏爱微软雅黑宋体,14/16px,非衬线体。2.字号印刷文字有大、小的不同变化,排版及图象处理软件中汉字字体大小的计量,前主要采用...

weixin_35912164的博客 2982

网页设计规范 网页设计稿尺寸

2019独角兽企业重金招聘Python工程师标准>>> ...

weixin_34122810的博客 1万+

干货!Web 网页设计规范

一、网页尺寸 制作网页时,我们选用的分辨率是72像素/英寸,使用的画布尺寸1920px*1080px。 但是并不代表我们可以在整个画布上作图。 网页的布局主要有两种,左右型布局和居中型布局。布局的不一致,使得可设计的空间也不相同。 1、左右布局 灵活性强, UI的限制小,左边通栏为导航栏,宽度没有具体的限制,可根据实际情况调整; 右侧为内容版块范围,是网站内容的展示区域。 ...

yihuliunian的博客 1万+

web前端网页设计作业_干货!Web 网页设计规范

一、网页尺寸制作网页时,我们选用的分辨率是72像素/英寸,使用的画布尺寸1920px*1080px。但是并不代表我们可以在整个画布上作图。网页的布局主要有两种,左右型布局和居中型布局。布局的不一致,使得可设计的空间也不相同。1、左右布局灵活性强, UI的限制小,左边通栏为导航栏,宽度没有具体的限制,可根据实际情况调整;右侧为内容版块范围,是网站内容的展示区域。2、居中布局中间的黄色部分为...

weixin_39710396的博客 3233

细谈标准网页的宽度、字体字号等的设计原则

标准字体字号:   中文网页一般文字正文都采用宋体12号(12px)字体,因为这个字体是系统对于浏览器特别优化过的字体。虽然12px-20px的宋体字都还能看,但是宋体12px是最漂亮的,也是最普遍应用的。   黑体一般是14号,因为一般很少用黑体做正文,主要都是标题或者是关键字。黑体14px是优化过的字体。   英文网页一般用11px字号,个人最喜欢的字体是tahomaverdana这两

梦之情缘 1万+

Markdown之改变 字体字号颜色

Markdown是一种可以使用普通文本编辑器编写的标记语言,通过类似HTML的标记语法,它可以使普通文本内容具有一定的格式。但是它本身是不支持修改字体字号颜色等功能的! &lt;font face="微软雅黑"&gt; 请在这里输入文本 &lt;/font&gt; &lt;font size=5&gt; 请在这里输入文本 &lt;/font&gt; &lt;font color=#1E90F...

清风与归 1100

php 页面字体大小,CSS_做网页字体大小参考 网页中同字号字体的不同单位对比列表,对于WEB前端页面开发字体- phpStudy...

网页字体大小参考 网页中同字号字体的不同单位对比列表对于WEB前端页面开发字体大小的设置是比较重要,这里找到了一些关于字号大小的数据,共享出来备以后参考,也希望能对大家有用!Points Pixels Ems Percent6pt 8px 0.5em 50%7pt 9px 0.5...

weixin_30916653的博客 262

前端web入门第三天】02 CSS字体和文本

CSS字体和文本

weixin_62613321的博客 1461

Web 网页设计规范

但没有栅格化设计经验的设计师需要注意,这里说的960是含边距部分,换句话说,在psd文档中,你的内容部分是950px,栅格化版面可以借助一些非常好用的在线工具,比如知名的Grid.Guide,这是12列栅格在内容宽度950下的三种版式规范,你也可以使用24列,灵活度更高。对于一些中规中矩的网站,或者说一般创意型的网站,栅格化设计还是非常推荐的,尤其是一些规模大周期长,后期需要不断迭代的项目,栅格化设计让网页呈现出专业可信赖感,并有助于后期的维护。“Main”是网站的主要区域,如果是博客的话它将包含的日志。

hdxx2022的博客 4490

Source Serif 4 开源衬线字体完整指南:从光学尺寸网页部署

如果你正在寻找一款能同时胜任印刷网页场景的开源衬线字体,Source Serif 4 值得优先考虑:它由 Adobe 出品,覆盖六档字重完整斜体、五种光学尺寸,并提供 OTF、TTF、WOFF、WOFF2 和可变字体全套格式,可免费商用。这篇文章会从设计师的真实痛点讲起,带你完成本地安装网页部署,再深入可变字体性能调优,最后用一份 FAQ 收尾。 ## 一个设计师的深夜困境 假设你是一

gitblog_00815的博客 421

web 网页设计规范

但没有栅格化设计经验的设计师需要注意,这里说的960是含边距部分,换句话说,在psd文档中,你的内容部分是950px,栅格化版面可以借助一些非常好用的在线工具,比如知名的Grid.Guide,这是12列栅格在内容宽度950下的三种版式规范,你也可以使用24列,灵活度更高。对于一些中规中矩的网站,或者说一般创意型的网站,栅格化设计还是非常推荐的,尤其是一些规模大周期长,后期需要不断迭代的项目,栅格化设计让网页呈现出专业可信赖感,并有助于后期的维护。“Main”是网站的主要区域,如果是博客的话它将包含的日志。

xinyuerr的博客 1682

Web网页设计规范简述

但没有栅格化设计经验的设计师需要注意,这里说的960是含边距部分,换句话说,在psd文档中,你的内容部分是950px,栅格化版面可以借助一些非常好用的在线工具,比如知名的Grid.Guide,这是12列栅格在内容宽度950下的三种版式规范,你也可以使用24列,灵活度更高。对于一些中规中矩的网站,或者说一般创意型的网站,栅格化设计还是非常推荐的,尤其是一些规模大周期长,后期需要不断迭代的项目,栅格化设计让网页呈现出专业可信赖感,并有助于后期的维护。“Main”是网站的主要区域,如果是博客的话它将包含的日志。

xinyuerr的博客 2115

关于 web 网页设计规范

转自:微点阅读https://www.weidianyuedu.com 一、网页尺寸 制作网页时,我们选用的分辨率是72像素/英寸,使用的画布尺寸1920px*1080px。 但是并不代表我们可以在整个画布上作图。 网页的布局主要有两种,左右型布局和居中型布局。布局的不一致,使得可设计的空间也不相同。 1、左右布局 灵活性强, UI的限制小,左边通栏为导航栏,宽度没有具体的限制,可根据实际情况调整; 右侧为内容版块范围,是网站内容的展示区域。 2、居中布局 中间的黄色部分为有效..

ysds20211402的博客 8918
上一篇: web前端入门到实战:解决HTML页面乱码问题
下一篇: web前端入门到实战:CSS五种方式实现 Footer 置底
白T恤架构师
博客等级 码龄7年 60粉丝 321原创
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值