网页设计中,font 如何 精确 字体大小?

比如font的属性是宋体, 如何 精确 字体大小?size=2 太小 。size=3 突然也太大了,如何精确到2.5大小的状态?

word中的pt(磅)和网页中的px(像素)之间的区别

px:pixel 像素,印刷屏幕上显示的最小单位。

pt:point 点,印刷业的标准长度单位。1pt=72分之一英寸。

好下面开始讲解字体大小。

------------------------------------------------------------------------------

但这种说法其实还是有问题,先来看看下面的例子: 


  从上面的字体中我们能看出72px要比72pt小一些,但96px正好和72pt一样大小 。

让我们来调整电脑的设置:在桌面上右键 > 属性 > settings > Advanced > General > DPI setting > 96 DPI。

试着改变设置,设为72DPI,重启,再打开浏览器看:72px已经等同于72pt了。为什么?

还是再做个实验:分别用800×600和1024×768看刚才的例子,明显高分辨率下,文字就变小。而且,关键的是,无论用px还是pt,都会变小。pt并没有如有些人所说,是“绝对”的,“固定”的。

但如果用打印机把这页面打印出来,就可以看到:无论屏幕用什么分辨率,打印出来大小都是一样的(这是当然的)。

首先要分清“屏幕效果”和“打印效果”这两个概念:


在浏览网页过程中,所有的“大”“小”概念,都是基于“屏幕”这个“界面”上。“屏幕”上的各种信息,包括文字、图片、表格等等,都会随屏幕的分辨率变

化而变化,一个100px宽度大小的图片,在800×600分辨率下,要占屏幕宽度的1/8,但在1024×768下,则只占约1/10。所以如果在定义

字体大小时,使用px作为单位,那一旦用户改变显示器分辨率从800到1024,用户实际看到的文字就要变“小”(自然长度单位),甚至会看不清,影响浏

览。

那是不是用pt做单位就没这样的问题呢?错!问题同样出现。刚才的例子已经很清楚的说明,在不同分辨率下,无论是px还是pt,都会改变

大小 

。以现在的电脑屏幕情况,还没有一种单位可以保证,在不同分辨率下,一个文字大小可以“固定不变”。因为这很难以实现也不是很有必要:全球电脑用户以亿来

数,屏幕从14寸到40寸甚至更高都有,屏幕大小不同,分辨率也不同,要保证一个字体在所有用户面前大小一样,实在是MISSION 

IMPOSSIBLE。另外,电脑有其自身的调节性,用户可以自己来调节:1)在浏览器中调节字体大小;2)在刚才提到的显示属性里调节。

那在页面设计中到底是用px还是pt呢?

我认为,这个并没有什么原则性差异,就看自己处于什么角度思考了。 


Mac机怎么情况不清楚,在Windows里,默认的显示设置中,把文字定义为96DPI(PPI,微软都将DPI和PPI混为一体,我们也就无须较真

了)。这样的定义,说明了:1px=1/96英寸。联系pt的概念,1pt=1/72英寸,可以得出,在这样的设置中,1px=0.75pt,常见的宋体

9pt=12px。在显示器分辨率不变的基础上(比如现在常用的1024×768),1px大小也就固定不变,改变显示设置,调整为144DPI,可以得

出,1px=0.5pt,常见的宋体9pt=18px。原先用12px来组成的一个文字,现在需要18px来组成,px多了,文字就“大”了,更易阅读

了。

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

(附公式:px = pt * DPI / 72)


对了,刚才还提到改变浏览器中文字大小的选项,也可以改变网页的文字大小。但在这种情况下,使用px和pt都是无效的,因为这2个都是有实际

“pixel”数值的单位,比如9pt是12px,大小固定。这里要引用新的单位:em,其实就是%。因为当网页中的字体没有给出实际的px或pt定义的

话,会有一个默认值:12pt即16px,对应浏览器中“字体大小”中的“中等”,以这个为标准,变大或缩小。(只适用于IE,在FF中,即便定义px或

pt也都可以变大变小)

所以,从这个概念上看,em才是真正的“相对单位”(百分比嘛,当然是相对),而px和pt都是绝对单位(都有固定值)。


在网页设计中,面向用户的屏幕的基本单位是px,因此使用px作为单位是最简单也最容易理解的,而pt也不过是通过了Windows的设置乘上了一个比

率转变成px再显示,算是绕了个圈子。参考大部分大型网站,包括Adobe和Microsoft,都是使用px作为单位,而且在html中,默认的单位就

是px,是不是也暗示着px是网页设计的“内定单位”?

但的word或中,使用pt就相当方便。因为使用Word和Photoshop的主要

目的都不是为了屏幕浏览,而是输出打印。当打印到实体时,pt作为一个自然长度单位就方便实用了:比如Word中普通的文档都用“宋体 

9pt”,标题用“黑体 

16pt”等等,无论电脑怎么设置,打印出来永远就是这么大。又或者在Photoshop中,设置一个图片中的某个艺术效果的字体是72pt大小,然后分

别将这张图片设为300DPI和72DPI,再打印出来,就可以看出,这2个字体大小完全一样,只是“清晰度”不同,300DPI更清晰。这是毫无疑问的

结果。


最后整理一下所有出现过的单位: 

px:pixel,像素,屏幕上显示的最小单位,用于网页设计,直观方便; 

pt:point,是一个标准的长度单位,1pt=1/72英寸,用于印刷业,非常简单易用; 

em:即%,在css中,1em=100%,是一个比率,结合CSS继承关系使用,具有灵活性。 

PPI(DPI):pixel(dot)per inch,每英寸的像素(点)数,是一个率,表示了“清晰度”,“精度” 。

--------------------------------------------------------------------------

总之,做网页的话建议最好用px,12px=9pt,相当于汉语中的小五字体;14px=11pt,相当于五号字体;16px=12pt,相当于小四字体;18px=14pt,相当于四号字体。

-----------------------------------------------------------------------------

具体的换算公式:1px=96分之一英寸,等于0.75pt.根据这个公司自己换算,想要什么字体基本上就知道了!可以慢慢推算出来。

温馨提示:答案为网友推荐,仅供参考
第1个回答  2018-03-31

一般中文的字体大小是12px或者14px。随着显示器分辨率不断提高,12px的文字在大于1440*900的显示器里看起来会显得比较小,阅读起来不是很容易,所以现在网页设计里面用12px的已经比较少了,特别是文章正文部分,普遍都会用14px。13px的字体在IE6下面会有一点点显示上的bug,所以现在用得也不太多,不过随着IE6慢慢被淘汰,这个问题也不再是一个问题了。而对于标题栏的文字大小,没有特别的限制,视觉上感觉舒服就行。字体大小代码:font-size:14px(字体大小14像素)。

css法:修改font-size属性。

js法1:p.setAttribute("fontSize","12px")。

js法2:p.style.fontSize=12+"px"。

jQuery法:$("p").css("fontSize","12px")。

本回答被网友采纳
第2个回答  2016-01-28
一般中文的字体大小是12px或者14px。随着显示器分辨率不断提高,12px的文字在大于1440*900的显示器里看起来会显得比较小,阅读起来不是很容易,所以现在网页设计里面用12px的已经比较少了,特别是文章正文部分,普遍都会用14px。13px的字体在IE6下面会有一点点显示上的bug,所以现在用得也不太多,不过随着IE6慢慢被淘汰,这个问题也不再是一个问题了。而对于标题栏的文字大小,没有特别的限制,视觉上感觉舒服就行。
字体大小代码:font-size:14px(字体大小14像素)
对于font-family,一般来说14px及以下大小的文字,应当设置为宋体,当然也可以设置为微软雅黑。不过在XP下默认是没有雅黑字体的,所以在css里面可以这样设置字体:
font-family:"Microsoft Yahei",simSun,Arial;
把几个字体用逗号隔开,如果系统没有第一种字体,就用第二种,如果没有第二种就用第三种,以此类推。
第3个回答  2015-12-09
用代码font-size:12px 后面是12px代表字体是12个像素,你可以依据自己的需要控制字体的大小
第4个回答  2012-12-24
W3C不赞成使用font标签,并且XHTML 1.0 Strict DTD不支持font标签的size属性。最好是用CSS来代替,例如<font style="font-size:16px">,这样可以很精确的以像素为单位确定字体大小
相似回答