How to set font size in HTML

When writing HTML code, appropriate font size can make the page look more comfortable, readable and professional. This article explains how to set font size in HTML.

There are seven different relative sizes keywords in HTML, namely: xx-small, x-small, small, medium, large, x-large and xx-large. Relative size is determined relative to the size of the current element's parent element. Generally speaking, the medium size is the default baseline size, which is equivalent to 16 px (pixels). Other keywords are calculated based on this baseline size.

In addition, you can use absolute sizes to set the font size. These sizes are either absolute units of length (such as pixels or points) or relative to a percentage of the screen. The advantage of absolute size is that it can accurately control the font size, but the disadvantage is that it cannot adapt to the needs of different screen sizes.

Here's how to set the font size:

1. Using relative sizes in HTML

By using the relative size keyword, you can set the font size based on the parent size. Element sizes are adjusted for better adaptability. Here is the sample code:

<!-- 使用 small 大小的关键字 -->
<p style="font-size: small;">This text is smaller than usual.</p>

<!-- 使用 large 大小的关键字 -->
<p style="font-size: large;">This text is larger than usual.</p>

<!-- 使用 x-large 大小的关键字 -->
<p style="font-size: x-large;">This text is even larger than before.</p>

2. Using absolute sizes in HTML

By using absolute sizes, you can have precise control over font size. The following is a sample code:

<!-- 使用像素作为绝对大小 -->
<p style="font-size: 20px;">This text is 20 pixels in size.</p>

<!-- 使用点作为绝对大小 -->
<p style="font-size: 14pt;">This text is 14 points in size.</p>

<!-- 使用百分比作为相对屏幕大小 -->
<p style="font-size: 200%;">This text is twice as big as normal.</p>

3. Using font size in CSS

You can use the style attribute directly to set the font size in HTML, but you can also set it through a CSS style sheet. set up. For example:

/* 在样式表中设置字体大小为 16 像素 */
p {
  font-size: 16px;
}

With this method, you can set multiple font sizes in the style sheet to better adapt to different page layouts.

Summary

Setting the HTML font size is a very simple operation. You only need to use the CSS font-size property to set it. However, the caveat is to choose an appropriate relative or absolute size to make the page more comfortable and readable. At the same time, you should also choose the corresponding font size according to the screen size to better adapt to different devices.

The above is the detailed content of How to set font size in HTML. For more information, please follow other related articles on the PHP Chinese website!