设置字体大小像素实例

2024-01-16 16:20 小编

设置字体大小像素

设置文字的大小与像素，让您完全控制文字大小：

实例

h1{font-size:40px;}

h2{font-size:30px;}

p{font-size:14px;}

上面的例子可以在InternetExplorer9,Firefox,Chrome,Opera,和Safari中通过缩放浏览器调整文本大小。

虽然可以通过浏览器的缩放工具调整文本大小，但是，这种调整是整个页面，而不仅仅是文本

用em来设置字体大小

为了避免InternetExplorer中无法调整文本的问题，许多开发者使用em单位代替像素。

em的尺寸单位由W3C建议。

1em和当前字体大小相等。在浏览器中默认的文字大小是16px。

因此，1em的默认大小是16px。可以通过下面这个公式将像素转换为em：px/16=em

实例

h1{font-size:2.5em;}/*40px/16=2.5em*/

h2{font-size:1.875em;}/*30px/16=1.875em*/

p{font-size:0.875em;}/*14px/16=0.875em*/在上面的例子，em的文字大小是与前面的例子中像素一样。不过，如果使用em单位，则可以在所有浏览器中调整文本大小。

不幸的是，仍然是IE浏览器的问题。调整文本的大小时，会比正常的尺寸更大或更小。

使用百分比和EM组合

在所有浏览器的解决方案中，设置<body>元素的默认字体大小的是百分比：

实例

body{font-size:100%;}

h1{font-size:2.5em;}

h2{font-size:1.875em;}

p{font-size:0.875em;}

联络方式：

微信二维码

您感兴趣的内容