HTML의 글꼴 태그-HTML 튜토리얼-php.cn

HTML의 글꼴 태그

WBOY

풀어 주다： 2024-09-04 16:27:51

원래의

423명이 탐색했습니다.

HTML의 글꼴 태그는 웹페이지나 HTML 문서를 더욱 매력적으로 만드는 데 사용되는 가장 중요한 속성 중 하나입니다. 포함된 텍스트의 크기, 색상, 스타일을 변경하는 속성이 있습니다. 글꼴 태그를 사용하면 웹 페이지의 크기, 색상, 글꼴을 동일한 텍스트 형식으로 만들 수 있습니다. 이 태그는 주로 크기, 얼굴 또는 유형, 색상과 같은 세 가지 주요 속성에 대해 작동합니다. 글꼴 태그는 HTML 문서의 블록 텍스트의 일부 기능을 변경하기 위해 HTML의 인라인 요소로 작동합니다. 안에 포함된 텍스트입니다. 태그는 포함된 텍스트의 스타일을 정의하는 데 사용됩니다.

구문:

<font size =" " face =" " color=" ">

로그인 후 복사

위의 구문 상태에서 글꼴 크기는 구문에 대한 속성으로 텍스트의 특정 크기를 설정하는 데 사용됩니다. 이 크기는 1부터 7까지의 숫자로 정의할 수 있습니다. 여기서 1은 가장 작은 텍스트이고 7은 가장 큰 텍스트 크기입니다. 글꼴 태그의 얼굴 속성은 HTML 문서의 글꼴 유형을 정의하는 데 사용되는 반면, 색상 속성은 포함된 텍스트의 특정 색상을 정의하는 데 사용됩니다.
HTML <글꼴> 꼬리표. ..를 사용하여 정의합니다. HTML에 태그를 추가하세요.

<body>
<p> <font size="2" color="blue" face="Calibri"> </font>
</p>
</body>

로그인 후 복사

이 태그는 글로벌 속성과 이벤트 속성도 지원합니다. 또한 아래에 나열된 몇 가지 다른 속성도 지원합니다.

Attribute Name	Detail Description
Size	This attribute is used to define a specific size for text in between 1 to 7.
Face or type	This attribute is used to define the font type for the included text.
Color	This attribute is used to show enclosed text in a different color.
Weight	This attribute defines the boldness of the text of the font tag.

속성 이름

상세 설명

크기 이 속성은 1에서 7 사이의 특정 텍스트 크기를 정의하는 데 사용됩니다. 얼굴 또는 문자 이 속성은 포함된 텍스트의 글꼴 유형을 정의하는 데 사용됩니다. 색상 이 속성은 둘러싸인 텍스트를 다른 색상으로 표시하는 데 사용됩니다. 무게 이 속성은 글꼴 태그 텍스트의 굵기를 정의합니다. HTML의 글꼴 태그 예

글꼴 태그는 HTML 코드에서 두 가지 방법으로 사용할 수 있습니다. 첫 번째는 HTML을 통해 글꼴 태그와 해당 속성 값을 포함하는 것이고, 두 번째는 속성 값을 CSS 코드로 정의하는 것입니다. 둘 다 동일한 출력을 생성합니다. 속성 값 정의의 유일한 차이점입니다.

예시 #1

속성 값으로 글꼴 태그 정의:

<!DOCTYPE html>
<html>
<head>
<title>Font Tag in HTML</title>
</head>
<body>
<h2>Example of  Font Tag in HTML </h2>
<p>General  text  without any Font tag attribute value</p>
<p>
<font color="orange">Text having normal font size and font face . Only changing
font   color  </font>
</p>
<p>
<font  face="cursive">Text having different font face.</font>
</p>
<p>
<font size="3">Text with Increased font size having default font type. </font>
</p>
</body>
</html>

로그인 후 복사

코드:

출력: HTML의 글꼴 태그

예시 #2

CSS를 통해 정의된 속성 값으로 글꼴 태그를 정의합니다.

<!DOCTYPE html>
<html>
<head>
<title>Font Tag in HTML</title>
</head>
<body>
<h2>Example of Font Tag in HTML using CSS </h2>
<p>Someone’s sitting in the shade today because someone plated a tree a long time ago. </p>
<p style="color : lightgreen;"> Someone’s sitting in the shade today because someone plated a tree a long time ago.
</p>
<p style="font-family : Book Antiqua; color: blue; " > Someone’s sitting in the shade today because someone plated a tree a long time ago.
</p>
<p style="font size:3px;"> Someone’s sitting in the shade today because
someone plated a tree a long time ago.
</p>
</body>
</html>

로그인 후 복사

코드:

출력: HTML의 글꼴 태그

예시 #3

이 예에서는 속성 값이 size인 Font 태그를 사용하고 있으며, 이는 아래와 같이 가장 낮은 크기에서 가장 높은 크기까지 텍스트를 정의합니다.

<!DOCTYPE html>
<html>
<head>
<title>HTML font tag</title>
</head>
<body>
<font size = "1">People may doubt what you say, but they will believe what you do.</font><br /> <br/>
<font size = "2">People may doubt what you say, but they will believe what you do.</font><br /> <br/>
<font size = "3">People may doubt what you say, but they will believe what you do.</font><br /> <br/>
<font size = "4">People may doubt what you say, but they will believe what you do.</font><br /> <br/>
<font size = "5">People may doubt what you say, but they will believe what you do.</font><br /> <br/>
<font size = "6">People may doubt what you say, but they will believe what you do.</font><br/><br/>
<font size = "7">People may doubt what you say, but they will believe what you do.</font>
</body>
</html>

로그인 후 복사

HTML 코드:

출력: HTML의 글꼴 태그

예시 #4

<!DOCTYPE html>
<html>
<head>
<title>HTML tag with Font Type attribute</title>
</head>
<body>
<font face = "Comic sans MS"> Correct one fault at a time. Concentrate on the one fault you want to overcome.</font><br/>
<font face = "Bernard MT Condensed" color="Red" >Correct one fault at a time. Concentrate on the one fault you want to overcome. </font><br/>
<font face = "Algerian">Correct one fault at a time. Concentrate on the one fault you want to overcome. </font><br/>
<font face = "Book Antiqua" size="5">Correct one fault at a time. Concentrate on the one fault you want to overcome. </font><br/>
<font face = "Aharoni"> Correct one fault at a time. Concentrate on the one fault you want to overcome.</font><br/>
<font face = "AR BERKLEY" >Correct one fault at a time. Concentrate on the one fault you want to overcome. </font><br/>
</body>
</html>

로그인 후 복사

HTML 코드:

출력: HTML의 글꼴 태그

예시 #5

<!DOCTYPE html>
<html>
<head>
<title>HTML Font tag-Color </title>
</head>
<body>
<font color = "#cc0066"><b>It is terrible thing to see and have no vision</b></font><br>
<font color = "#66ff33"><b>Today's preparation </b></font> <br>
<font color = "#0000cc"><strong>Success depends on your backbone not your wishbone.</strong></font><br />
<font color = "#cc3300"><b>Patience makes lighter what sorrow may not heal</b></font>  <br>
<font color = "#666600"><b>Hold fast to dreams, for if dreams die, life is broken winged bird that cannot fly </b></font> <br>
</body>
</html>

로그인 후 복사

HTML 코드:

출력: HTML의 글꼴 태그