<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>HTML5 Web Font</title>
<style>
@font-face{
font-family:'Nanum';
src: url();;
}
p{font-size: 28px;}
p.cls1{font-family:'Nanum',serif;}
</style>
</head>
<body>
<p>Default Font Example</p>
<p class="cls1">user Font @font-face Example</p>
</body>
</html>#### Detailed Breakdown:
- `<meta charset="utf-8">`: Sets the document's character encoding to UTF-8, which supports most characters from written languages worldwide, ensuring the content will be correctly displayed.
- `<title>HTML5 Web Font</title>`: The title of the web page, which appears in the browser tab. It signifies the content's focus on demonstrating the use of web fonts in HTML5.
- `@font-face{...}`: This CSS rule is crucial for defining custom fonts to be used on the webpage.
- `font-family:'Nanum';`: Declares a name ('Nanum') for the font family. This name is used in other CSS rules to apply the font to specific HTML elements.
- `src: url();;`: The `src` property is intended to specify the location (URL) of the font file. This example lacks the actual URL, which should point to the font file's location. This could be a URL to a web server or a relative path within the website's directory structure. Note the accidental double semicolon.
- `p{font-size: 28px;}`: Sets a default font size of 28px for all paragraph (`<p>`) elements on the page, making the text large enough to clearly see the font styling.
- `p.cls1{font-family:'Nanum',serif;}`: Applies the 'Nanum' font family to paragraphs with the class `cls1`. If the 'Nanum' font cannot be loaded or found, it falls back to a generic serif font. This ensures that the text remains legible even if there are issues loading the custom font.
#### Body Content:
- `<p>Default Font Example</p>`: Shows how text appears using the browser's default font, serving as a comparison point for the custom font.
- `<p class="cls1">user Font @font-face Example</p>`: Intended to display text using the 'Nanum' custom font defined in the `@font-face` rule. This demonstrates the visual difference when applying a custom font versus the browser's default.
#### Notes:
For the `@font-face` rule to function correctly, the `src` property needs to include a valid path to the font file(s) you wish to use. This can be a local path (e.g., `fonts/Nanum.ttf`) or a URL to a hosted font file. The example as provided will not successfully load the 'Nanum' font because the `src` URL is missing.
This document serves as a template for including and using custom fonts via CSS in HTML5 documents, showcasing the power and flexibility of the `@font-face` rule for web design.
'개념 > HTML+CSS' 카테고리의 다른 글
| HTML) Exploring Font Styles and Effects in CSS (0) | 2025.02.04 |
|---|---|
| HTML) background style type (0) | 2025.02.03 |
| HTML) CSS Styling Showcase (0) | 2025.02.02 |
| HTML) Web font (0) | 2025.02.01 |
| HTML) Transforming XML Student Data into HTML with XSLT (0) | 2025.01.29 |