HTML-글꼴

글꼴은 웹 사이트를보다 사용자 친화적으로 만들고 콘텐츠 가독성을 높이는 데 매우 중요한 역할을합니다. 글꼴과 색상은 페이지를 보는 데 사용되는 컴퓨터와 브라우저에 전적으로 의존하지만 HTML을 사용할 수 있습니다.태그를 사용하여 웹 사이트의 텍스트에 스타일, 크기 및 색상을 추가합니다. 사용할 수 있습니다<basefont> 태그를 사용하여 모든 텍스트를 동일한 크기, 얼굴 및 색상으로 설정합니다.

글꼴 태그에는 size, color, 및 face글꼴을 사용자 지정합니다. 웹 페이지 내에서 언제든지 글꼴 속성을 변경하려면 태그를 사용하면됩니다. 다음 텍스트는 태그로 닫을 때까지 변경된 상태로 유지됩니다. 하나의 태그 내에서 하나 또는 모든 글꼴 속성을 변경할 수 있습니다.

Note년 - 글꼴 및 BASEFONT 태그는 사용되지 않으며 HTML의 향후 버전에서 제거 될 예정이다. 따라서 그들은 오히려 사용해서는 안되며 CSS 스타일을 사용하여 글꼴을 조작하는 것이 좋습니다. 그러나 여전히 학습 목적으로이 장에서는 font 및 basefont 태그에 대해 자세히 설명합니다.

글꼴 크기 설정

다음을 사용하여 콘텐츠 글꼴 크기를 설정할 수 있습니다. size속성. 허용되는 값의 범위는 1 (가장 작음)에서 7 (가장 큼)까지입니다. 글꼴의 기본 크기는 3입니다.

예

<!DOCTYPE html>
<html>

   <head>
      <title>Setting Font Size</title>
   </head>

   <body>
      <font size = "1">Font size = "1"</font><br />
      <font size = "2">Font size = "2"</font><br />
      <font size = "3">Font size = "3"</font><br />
      <font size = "4">Font size = "4"</font><br />
      <font size = "5">Font size = "5"</font><br />
      <font size = "6">Font size = "6"</font><br />
      <font size = "7">Font size = "7"</font>
   </body>

</html>

이것은 다음 결과를 생성합니다-

상대적 글꼴 크기

미리 설정된 글꼴 크기보다 더 큰 크기 또는 작은 크기를 지정할 수 있습니다. 다음과 같이 지정할 수 있습니다. 또는 

예

<!DOCTYPE html>
<html>

   <head>
      <title>Relative Font Size</title>
   </head>

   <body>
      <font size = "-1">Font size = "-1"</font><br />
      <font size = "+1">Font size = "+1"</font><br />
      <font size = "+2">Font size = "+2"</font><br />
      <font size = "+3">Font size = "+3"</font><br />
      <font size = "+4">Font size = "+4"</font>
   </body>

</html>

이것은 다음 결과를 생성합니다-

글꼴 설정

face 속성을 사용하여 글꼴을 설정할 수 있지만 페이지를 보는 사용자에게 글꼴이 설치되어 있지 않으면 볼 수 없습니다. 대신 사용자는 사용자의 컴퓨터에 적용 할 수있는 기본 글꼴을 보게됩니다.

예

<!DOCTYPE html>
<html>

   <head>
      <title>Font Face</title>
   </head>

   <body>
      <font face = "Times New Roman" size = "5">Times New Roman</font><br />
      <font face = "Verdana" size = "5">Verdana</font><br />
      <font face = "Comic sans MS" size =" 5">Comic Sans MS</font><br />
      <font face = "WildWest" size = "5">WildWest</font><br />
      <font face = "Bedrock" size = "5">Bedrock</font><br />
   </body>

</html>

이것은 다음 결과를 생성합니다-

대체 글꼴 지정

방문자는 해당 글꼴이 컴퓨터에 설치되어있는 경우에만 해당 글꼴을 볼 수 있습니다. 따라서 글꼴 이름을 쉼표로 구분하여 나열하여 둘 이상의 글꼴 대체 글꼴을 지정할 수 있습니다.

<font face = "arial,helvetica">
<font face = "Lucida Calligraphy,Comic Sans MS,Lucida Console">

페이지가로드되면 브라우저에 사용 가능한 첫 번째 글꼴이 표시됩니다. 지정된 글꼴이 설치되지 않은 경우 기본 글꼴 인 Times New Roman 이 표시됩니다 .

Note − 전체 목록 확인 HTML Standard Fonts.

글꼴 색상 설정

color 속성을 사용하여 원하는 글꼴 색상을 설정할 수 있습니다 . 색상 이름 또는 해당 색상의 16 진수 코드로 원하는 색상을 지정할 수 있습니다.

Note − 전체 목록을 확인할 수 있습니다. HTML Color Name with Codes.

예

<!DOCTYPE html>
<html>

   <head>
      <title>Setting Font Color</title>
   </head>
	
   <body>
      <font color = "#FF00FF">This text is in pink</font><br />
      <font color = "red">This text is red</font>
   </body>
	
</html>

이것은 다음 결과를 생성합니다-

<basefont> 요소

<basefont> 요소는 태그 내에 포함되지 않은 문서의 모든 부분에 대한 기본 글꼴 크기, 색상 및 서체를 설정해야합니다. 요소를 사용하여 <basefont> 설정을 재정의 할 수 있습니다.

<basefont> 태그는 또한 색상, 크기 및 얼굴 속성을 취하며 크기가 더 크면 +1 값을, 두 크기가 더 작 으면 -2 값을 지정하여 상대적 글꼴 설정을 지원합니다.

예

<!DOCTYPE html>
<html>

   <head>
      <title>Setting Basefont Color</title>
   </head>
	
   <body>
      <basefont face = "arial, verdana, sans-serif" size = "2" color = "#ff0000">
      <p>This is the page's default font.</p>
      <h2>Example of the &lt;basefont&gt; Element</h2>
      
      <p><font size = "+2" color = "darkgray">
            This is darkgray text with two sizes larger
         </font>
      </p>

      <p><font face = "courier" size = "-1" color = "#000000">
            It is a courier font, a size smaller and black in color.
         </font>
      </p>
   </body>
	
</html>

이것은 다음 결과를 생성합니다-