使用 CSS 中百分比和 em 的组合
我们可以结合使用百分比和 em 来指定元素的字体大小,以实现更好的字体兼容性。这使我们可以在不同的浏览器中获得统一的文本。百分比和 em 都是相对测量值。
语法
CSS font-size 属性的语法如下。对于 value,以下适用于百分比和 em 单位。此外,还可以设置其他长度单位 -
Selector { font-size: /*value*/ }
示例
以下示例说明如何设置 CSS font-size 属性。首先,我们使用 font-size 属性使用百分比设置 <body> 字体 -
body { font-size: 80%; }
使用 em 单位设置 <p> 元素的字体大小 -
p { font-size: 2em; }
让我们看看示例 -
<!DOCTYPE html> <html> <head> <style> body { font-size: 80%; } p { font-size: 2em; } span { font-size: 4em; font-style: italic; } </style> </head> <body> <p>Reading <span>source code</span> written by others gives you opportunity to criticize the mistakes done in writing that code</p> </body> </html>
示例
以下示例说明如何设置 CSS font-size 属性。首先,我们使用
使用 font-size 属性使用百分比设置字体 -
div { font-size: 120%; }
设置字体大小
元素使用 em 单位 -
p { font-size: 2em; }
让我们看看示例 -
<!DOCTYPE html> <html> <head> <style> div { font-size: 120%; } p { font-size: 2em; } </style> </head> <body> <h3>Demo Heading</h3> This is example text. <div> Examples are easier to understand with practical implementation <p>This is another text just to display different ways to set font size in CSS.</p> </div> </body> </html>
广告