网页设计中,font 如何 精确 字体大小?
发布网友
发布时间：2022-04-24 00:38
共11个回答
热心网友
时间：2022-05-12 11:48
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.根据这个公司自己换算，想要什么字体基本上就知道了！可以慢慢推算出来。
热心网友
时间：2022-05-12 13:06
一般中文的字体大小是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")。
热心网友
时间：2022-05-12 14:41
字体大小代码：font-size:14px（字体大小14像素）
对于font-family，一般来说14px及以下大小的文字，应当设置为宋体，当然也可以设置为微软雅黑。不过在XP下默认是没有雅黑字体的，所以在css里面可以这样设置字体：
font-family:"Microsoft Yahei",simSun,Arial;
把几个字体用逗号隔开，如果系统没有第一种字体，就用第二种，如果没有第二种就用第三种，以此类推。
热心网友
时间：2022-05-12 16:32
热心网友
时间：2022-05-12 18:40
热心网友
时间：2022-05-12 21:05
热心网友
时间：2022-05-12 23:46
字体设置成为宋体12像素字体：.px12{font-family:宋体; font-size:12px}
那如何调用：<font class="px12">这是设置宋体12像素字体效果</font>
直接写入页面也是同样达到效果，方法为：<font style="font-family:宋体; font-size:12px"></font>
那样你字体大小就可以很好地精确起来，就不会一下子这么大这么难看了，你可以试一下。
希望我的回答能令你满意！
热心网友
时间：2022-05-13 02:44
一般是这么大的为标准吧，标题会更大，
热心网友
时间：2022-05-13 05:59
热心网友
时间：2022-05-13 09:30
热心网友
时间：2022-05-13 13:18
