<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>HTML5 Web font</title>
<!--How to use Link tag-->
<link href=''>
<style>
/*import protocol use it*/
@import url();
p{font-size:28px;}
p.cls1{font-family: 'Emblema One';}
p.cls2{font-family: 'Freckle Face';}
</style>
</head>
<body>
<p>Default Font Example</p>
<p class="cls1">Web Font1</p>
<p class="cls2">Web Font2</p>
</body>
</html>#### Document Structure and Code Explanation:
- `<meta charset="utf-8">`: Specifies the character encoding for the HTML document to be UTF-8, supporting a wide range of characters for internationalization.
- `<title>HTML5 Web font</title>`: Sets the title of the web page to "HTML5 Web font", which is displayed on the browser's title bar or tab.
- `<link href=''>`: Intended to link to an external web font library or font file. The `href` attribute is empty, so it needs a URL pointing to a web font CSS file for it to function correctly. This method is one of the easiest ways to incorporate web fonts into a webpage.
- `@import url();`: Used within the `<style>` block to import a web font from an external URL. Like the `<link>` tag, it's missing the actual URL, which should point to the web font's CSS file. This CSS at-rule allows for the inclusion of external stylesheets, including those hosting web fonts.
- `p{font-size:28px;}`: Sets the default font size for all `<p>` (paragraph) elements to 28px, ensuring the text is large enough to showcase the differences in fonts clearly.
- `p.cls1{font-family: 'Emblema One';}`: Applies the "Emblema One" font family to paragraphs with the class `cls1`. This demonstrates how a specific web font can be applied to text elements.
- `p.cls2{font-family: 'Freckle Face';}`: Similarly, assigns the "Freckle Face" font family to paragraphs with the class `cls2`, showcasing another web font.
#### Content:
- The body contains three `<p>` elements:
- The first paragraph shows the default font that would be used by the browser in the absence of any specified web font.
- The second and third paragraphs (`class="cls1"` and `class="cls2"`) are intended to display text using the "Emblema One" and "Freckle Face" web fonts, respectively. However, without the actual URLs provided in the `<link>` and `@import` statements, these paragraphs will fall back to the default browser font or any available font in the specified font-family that closely matches the named web fonts.
#### Notes:
To properly demonstrate the use of web fonts, the document needs the actual URLs for the "Emblema One" and "Freckle Face" fonts filled into the `<link href=''>` and `@import url();` placeholders. Typically, these URLs can be obtained from web font services such as Google Fonts, where users can select fonts and then copy the provided HTML and CSS code snippets to include them in their web projects.
'개념 > 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) Using @font-face for Custom Fonts in HTML5 (0) | 2025.01.31 |
| HTML) Transforming XML Student Data into HTML with XSLT (0) | 2025.01.29 |