HTML 글꼴이란 무엇입니까?-HTML 튜토리얼-php.cn

HTML 글꼴이란 무엇입니까?

藏色散人

풀어 주다： 2018-12-04 14:50:19

원래의

17249명이 탐색했습니다.

HTML 웹 디자인에서는 글꼴 스타일 설정이 가장 기본입니다. 웹 페이지에 적절한 글꼴을 설정하면 사용자 경험이 향상될 수 있습니다. 그런 다음 글꼴 설정은 주로 CSS의 글꼴 모음 및 글꼴 스타일과 같은 글꼴 관련 속성을 사용합니다.

HTML 글꼴이란 무엇입니까?

다음은 여러분에게 소개할 몇 가지 일반적인 HTML 글꼴 스타일입니다!

코드 예:

<!DOCTYPE>
<html>
<meta charset="utf-8">
<head>
    <title></title>
    <style type="text/css">
        h2 { color: green; }

        #p1 { font-family: Times, "Times New Roman", serif; }
        #p2 { font-family: Helvetica, Arial, sans-serif; }
        #p3 { font-family: serif; }
        #p4 { font-family: sans-serif; }
        #p5 { font-family: monospace; }
        #p6 { font-family: cursive; }
        #p7 { font-family: fantasy; }

        .s1 { font-style: italic; }
        .s2 { font-style: oblique; }
        .s3 { font-weight: bold; }
        .s4 { font-weight: 100; }
        .s5 { font-style: normal;}
    </style>

</head>
<body>
<h1>字体系列</h1>
<p>与CSS一起使用。两个常见的字体组合列表和五个通用后备字体系列。</p>
一个serif字体家族列表！
<h2>font-family: Times, "Times New Roman", serif</h2>
<p id="p1">
    <span class="s1">斜体字体！</span>
    <span class="s2">字体样式为font-style: oblique; </span>
    <span class="s3">字体样式为font-weight: bold;</span>
    <span class="s4">字体样式为font-weight: 100;</span>
    <span class="s5">正常字体样式！</span>
</p>
一个sans-serif字体家族列表！
<h2>font-family: Helvetica, Arial, sans-serif</h2>
<p id="p2">
    <span class="s1">斜体字体！</span>
    <span class="s2">字体样式为font-style: oblique; </span>
    <span class="s3">字体样式为font-weight: bold;</span>
    <span class="s4">字体样式为font-weight: 100;</span>
    <span class="s5">正常字体样式！</span>
</p>
serif通用字体系列！
<h2>font-family: serif</h2>
<p id="p3">
    <span class="s1">斜体字体！</span>
    <span class="s2">字体样式为font-style: oblique; </span>
    <span class="s3">字体样式为font-weight: bold;</span>
    <span class="s4">字体样式为font-weight: 100;</span>
    <span class="s5">正常字体样式！</span>
</p>
sans-serif通用字体系列！
<h2>font-family: sans-serif</h2>
<p id="p4">
    <span class="s1">斜体字体！</span>
    <span class="s2">字体样式为font-style: oblique; </span>
    <span class="s3">字体样式为font-weight: bold;</span>
    <span class="s4">字体样式为font-weight: 100;</span>
    <span class="s5">正常字体样式！</span>
</p>
等宽通用字体系列！
<h2>font-family: monospace</h2>
<p id="p5">
    <span class="s1">斜体字体!</span>
    <span class="s2">字体样式为font-style: oblique; </span>
    <span class="s3">字体样式为font-weight: bold;</span>
    <span class="s4">字体样式为font-weight: 100;</span>
    <span class="s5">正常字体样式！</span>
</p>
草书字体家族！
<h2>font-family: cursive</h2>
<p id="p6">
    <span class="s1">斜体字体！</span>
    <span class="s2">字体样式为font-style: oblique; </span>
    <span class="s3">字体样式为font-weight: bold;</span>
    <span class="s4">字体样式为font-weight: 100;</span>
    <span class="s5">正常字体样式！</span>
</p>
幻想通用字体系列！
<h2>font-family: fantasy</h2>
<p id="p7">
    <span class="s1">斜体字体！</span>
    <span class="s2">字体样式为font-style: oblique; </span>
    <span class="s3">字体样式为font-weight: bold;</span>
    <span class="s4">字体样式为It sucks in with a 100 font-weight!</span>
    <span class="s5">正常字体样式！</span>
</p>

</body>
</html>

로그인 후 복사

프런트 엔드 효과는 다음과 같습니다.

HTML 글꼴이란 무엇입니까?

font-family 요소의 글꼴 모음을 지정합니다. 글꼴 계열은 여러 글꼴 이름을 "대체" 시스템으로 저장할 수 있습니다. 브라우저가 첫 번째 글꼴을 지원하지 않으면 다음 글꼴을 시도합니다. 즉, 글꼴 패밀리 속성의 값은 요소에 사용할 글꼴 패밀리 이름 및/또는 클래스 패밀리 이름의 우선 순위 목록입니다. 브라우저는 인식한 첫 번째 값을 사용합니다.

글꼴 계열 이름에는 두 가지 유형이 있습니다.

지정된 계열 이름: "times", "courier", "arial"과 같은 특정 글꼴의 이름입니다.

일반적인 글꼴 계열 이름: 예: "serif", "sans-serif", "cursive", "fantasy", "monospace"

팁: 각 값을 쉼표로 구분하고 항상 계열 이름을 끝에 제공하세요. 선택.

참고: 특정 글꼴 모음(Geneva)을 사용하는 것은 전적으로 해당 글꼴 모음을 사용자 컴퓨터에서 사용할 수 있는지 여부에 따라 달라집니다. 이 속성은 글꼴 다운로드를 나타내지 않습니다. 따라서 일반적인 글꼴 계열 이름을 대체 수단으로 사용하는 것이 좋습니다.

font-style 속성은 글꼴 스타일을 정의합니다. 이 속성은 기울임꼴, 기울임꼴 또는 일반 글꼴의 사용을 설정합니다. 기울임꼴 글꼴은 일반적으로 글꼴 모음 내의 개별 글꼴로 정의됩니다. 이론적으로 사용자 에이전트는 일반 글꼴을 기반으로 기울임꼴 글꼴을 계산할 수 있습니다.

이 글은 HTML 글꼴이 무엇인지에 대한 소개입니다. 도움이 필요한 친구들에게 도움이 되길 바랍니다!

위 내용은 HTML 글꼴이란 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!