글꼴 HTML을 설정하는 방법

PHPz

풀어 주다： 2023-05-15 16:47:08

원래의

3840명이 탐색했습니다.

HTML(Hypertext Markup Language)은 웹 페이지를 생성하기 위한 기본 언어로, 페이지의 구조, 레이아웃, 스타일 및 기능을 정의하는 데 사용할 수 있습니다.

글꼴은 웹 디자인에서 중요한 요소로, 사용자의 웹 콘텐츠 읽기 경험에 영향을 줄 수 있습니다. 따라서 웹 페이지의 내용이 명확하고 읽기 쉽도록 적절한 글꼴을 설정하는 것이 필요합니다. 이 기사에서는 HTML 글꼴을 설정하는 방법을 소개합니다.

1. HTML 글꼴 태그

HTML 파일에서는 태그를 사용하여 텍스트 글꼴을 정의할 수 있습니다. 일반적으로 사용되는 글꼴 태그는 다음과 같습니다.

태그: 텍스트 글꼴, 크기, 색상 등을 제어하는 데 사용됩니다.

~

태그: 제목의 글꼴 크기와 스타일을 정의하는 데 사용됩니다.

및 태그: 텍스트 내용을 강조하는 데 사용되며 CSS를 통해 글꼴 스타일을 설정할 수 있습니다.

2. 태그

태그는 HTML에서 글꼴을 설정하는 가장 기본적인 태그입니다.

size: 숫자로 정의할 수 있는 글꼴 크기를 정의합니다. size="+1"과 같은 값 또는 상대 크기는 원래 글꼴보다 한 크기 더 크다는 것을 의미합니다.
색상: 글꼴 색상을 정의합니다. 빨간색의 경우 color="#FF0000"과 같이 16진수 또는 색상 이름을 사용할 수 있습니다.
face: 글꼴 모음(예: 글꼴 이름)을 정의하고 우선순위에 따라 앞에서 뒤로 일치시킬 수 있습니다. 예를 들어, face="Microsoft YaHei, SimHei"는 Microsoft YaHei 글꼴이 사용된다는 의미입니다. 먼저 시스템에 해당 글꼴이 없으면 굵은 글꼴을 사용하십시오.

다음은 기본 태그 사용 예입니다.

<font size="+1" color="#FF0000" face="Microsoft YaHei, SimHei">这是一段红色、加大字号、优先使用微软雅黑字体的文本。</font>

로그인 후 복사

3개,

태그는

글꼴 크기가 큰 것부터 작은 것 순으로 정렬되어 있으며,

은 가장 큰 글꼴을 갖고

은 가장 작은 글꼴을 가집니다.
다음은

태그 사용 예입니다.

<h1>这是一级标题</h1>

로그인 후 복사

IV.CSS 스타일 시트

HTML의 글꼴 설정은 간단하고 직관적이지만 실제로 사용하려면 글꼴 속성을 자주 변경해야 합니다. HTML 파일이 너무 길어지고 혼란스러워집니다. 이 문제를 해결하려면 CSS(Cascading Style Sheets)를 사용하여 글꼴 스타일을 지정할 수 있습니다.

CSS는 웹 페이지의 표시 효과를 설명하는 데 사용되는 언어로 글꼴, 색상, 간격, 테두리 등 HTML의 다양한 요소의 표시 모드를 제어할 수 있습니다.

다음은 CSS를 사용하여 글꼴을 설정하는 스타일시트의 예입니다.

body {
    font-family: "Microsoft YaHei", Arial, sans-serif;
    font-size: 14px;
    color: #333;
}

로그인 후 복사

위 예에서 글꼴 계열은 font-family 속성을 통해 정의되며, 이에 따라 여러 글꼴 이름이 사용됩니다. 우선순위로 앞에서 뒤로 일치합니다. font-size 속성은 글꼴 크기를 픽셀 단위로 정의합니다. color 속성은 16진수 표기법을 사용하여 글꼴 색상을 정의합니다. font-family属性定义了字体系列，使用了多个字体名称，根据优先级从前往后匹配。font-size属性定义了字体大小，使用了像素作为单位。color属性定义了字体颜色，使用了十六进制表示法。

可以将CSS样式表放在HTML文件头部的<head>

아래와 같이 HTML 파일의 헤드에 있는 <head> 태그에 CSS 스타일 시트를 배치할 수 있습니다.

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>我的网页</title>
        <style type="text/css">
            body {
                font-family: "Microsoft YaHei", Arial, sans-serif;
                font-size: 14px;
                color: #333;
            }
        </style>
    </head>
    <body>
        <p>这是一个段落</p>
    </body>
</html>

로그인 후 복사

위 예에서 HTML 코드를 찾을 수 있습니다 더 간결하고 명확하며 동시에 CSS 스타일 시트를 재사용할 수 있어 코드 유지 관리가 더 편리해졌습니다.

5. 요약

HTML 문서의 글꼴 설정은 태그나 CSS 스타일 시트를 통해 수행할 수 있습니다. 태그는 글꼴 크기, 색상 및 시리즈를 설정할 수 있고,