html5 set font

HTML5, as one of the most commonly used web standards now, provides many practical functions, including the function of font setting. In HTML5, there are many ways to set fonts, some of which are introduced below.

1. Set fonts in CSS style sheets

Use CSS style sheets to add font settings to the entire web page or to set individual elements. The code to implement this function is as follows:

/*为整个网页设置字体*/
body {
  font-family: Arial, sans-serif;
}

/*为单个元素设置字体*/
h1 {
  font-family: Georgia, serif;
}

The above code implements the font setting through the font-family attribute. This property is followed by a list of font family names, and multiple fonts can be specified in order of precedence. If the first font does not exist, the second font is automatically used, and so on. In the above example, if the user does not have the Arial font, the default sans-serif font will be used. Likewise, if the Georgia font is not present, the default serif font will be used.

2. Set fonts in HTML tags

HTML tags can also set fonts directly, but this method is generally not recommended. This is because in actual web development, it is generally necessary to separate content and style, and use CSS style sheets to achieve unified management of styles and improve the maintainability of the code. The following is a sample code for setting the font in the HTML tag:

<h1 style="font-family: Arial, sans-serif;">这是标题</h1>
<p style="font-family: Georgia, serif;">这是段落</p>

As you can see, in the above code, the style attribute is used to set the font. As in the CSS style sheet, the font-family attribute is also used to set the font. However, it should be noted that if you need to apply the same style to multiple elements, this method requires modifying the style attribute of each element, which requires a large workload and is inconvenient to maintain.

3. Using Google Fonts

Google Fonts is an online font library that provides free font download services. Font settings can be applied to the entire web page or to a certain element by referencing the CSS files provided by Google Fonts. The following is a sample code using Google Fonts:

<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
<style>
body {
  font-family: 'Open Sans', sans-serif;
}
</style>

The above code applies the Open Sans font to the entire web page by referencing the CSS file provided by Google Fonts. Use the name of the font 'Open Sans' in the font-family attribute to complete the font setting.

4. Use web fonts

Also to improve the compatibility and visual effects of web pages, web fonts can also be applied to HTML5. Before using web fonts, you need to upload the font file to the server and reference it in the CSS file. The following is sample code for using web fonts:

@font-face {
  font-family: 'MyCustomFont';
  src: url('/fonts/mycustomfont.ttf') format('truetype');
}
body {
  font-family: 'MyCustomFont', sans-serif;
}

In the @font-face rule block, a custom font named MyCustomFont is declared. The path and file format of the font file can be specified through the src attribute. In the body tag, you can set the font by the name of the custom font.

The above are several ways to set fonts in HTML5. In actual web development, you can flexibly choose different methods and set fonts according to specific needs.

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