How to modify font style through HTML and CSS

In web design, fonts are one of the very important factors. Good font selection can enhance the readability and visual impact of a web page. HTML provides many font choices, and font styles can also be modified through CSS. In this article, we will explore how to modify font styles through HTML and CSS.

1. Font selection in HTML

In HTML, there are many fonts to choose from. Here are a few examples of common fonts:

<p style="font-family: Arial, sans-serif;">这里是Arial字体。</p>
<p style="font-family: "Times New Roman", serif;">这里是Times New Roman字体。</p>
<p style="font-family: Verdana, Geneva, sans-serif;">这里是Verdana字体。</p>
<p style="font-family: Impact, Charcoal, sans-serif;">这里是Impact字体。</p>

In the above example, we used the font-family attribute to specify the font. Here, we have specified four fonts: Arial, Times New Roman, Verdana, and Impact, which correspond to different styles. It should be noted that if you define the same styles in CSS files, these styles will override the styles set in HTML tags.

2. Defining font styles in CSS

In CSS, we can define font styles through the font-family property. For example:

body {
  font-family: Arial, sans-serif;
}

Here, we define the default font for the entire page to be Arial. If the Arial font cannot be loaded, the sans-serif font will be used instead.

In addition to the font-family attribute, the font style can also be modified through other attributes. The following are some common attributes:

• font-size: Define the font size, such as 12px, 14px, etc.
• font-style: Define the font style, including normal, italic, italic, etc.
• font-weight: Define the thickness of the font, such as normal, bold, bolder, etc.
• line-height: Define the line height, which can be a number or a percentage.

These properties can be combined to create different font effects. For example:

h1 {
  font-family: Arial, sans-serif;
  font-size: 24px;
  font-weight: bold;
  line-height: 1.5;
}

Here, we define the font of the h1 title as Arial, the font size as 24px, the font thickness as bold, and the line height as 1.5 times.

3. Using Web Fonts

In addition to using the system’s built-in fonts, we can also use Web fonts. Web font is a font format that can be used directly on the browser. Common formats include WOFF, WOFF2, TTF and OTF, etc. Using web fonts can add variety and uniqueness to your fonts.

To use web fonts, we can declare @font-face rules in CSS. For example:

@font-face {
  font-family: MyWebFont;
  src: url('webfont.woff2') format('woff2'),
       url('webfont.woff') format('woff');
}

body {
  font-family: MyWebFont, Arial, sans-serif;
}

Here, we first declare a font named "MyWebFont", and then specify the address of the font file through the src attribute. When using the font-family property, we can use multiple fonts by separating them with commas. In this example, if the browser cannot load the web font, the Arial font in the system will be used instead.

4. Copyright issues of fonts

When using custom fonts, we need to pay attention to the copyright issues of fonts. If the copyright of the font does not allow use on the web, then we cannot use the font in the web page.

There are many free fonts available for us to use now, such as Google Fonts and DaFont, etc. Through these websites, we can quickly find suitable fonts and call them in CSS.

5. Summary

Fonts play an important role in web design. Through HTML and CSS, we can easily adjust the style and appearance of fonts. When choosing a font, there are readability and copyright issues to consider. Using web fonts can increase diversity, but you need to pay attention to the copyright issues of the fonts.

The above is the detailed content of How to modify font style through HTML and CSS. For more information, please follow other related articles on the PHP Chinese website!