>  기사  >  웹 프론트엔드  >  HTML 글꼴 스타일

HTML 글꼴 스타일

WBOY
WBOY원래의
2024-09-04 16:14:25499검색

다음 문서인 HTML 글꼴 스타일에서는 HTML에서 가장 일반적으로 사용되는 글꼴 스타일의 개요를 제공합니다. HyperText Markup Language로 널리 알려진 HTML은 웹 응용 프로그램 및 웹 사이트를 만드는 데 필수적인 가장 중요하고 중요한 언어 또는 스크립트 중 하나입니다. 모든 태그와 기타 기능이 기본 구성 요소를 형성하므로 이는 웹 앱 개발의 중추와 같습니다.

프론트엔드 개발도 모두 HTML 스크립팅을 기반으로 합니다. 이는 단지 마크업 태그를 제공하는 데 사용될 수 있으며, 이러한 태그의 모양과 느낌을 향상시키기 위해 매우 인기 있는 또 다른 라이브러리인 CSS(Cascading Style Sheets)가 있습니다. 이는 HTML에서 요구하는 모든 종류의 스타일을 구현하는 데 사용할 수 있습니다. 글꼴과 스타일은 웹사이트의 주요 부분을 구성하며, 이 기사에서는 대부분의 HTML 글꼴 스타일 목록을 제공할 것입니다.

HTML 글꼴 스타일

글꼴은 콘텐츠 가독성을 높이는 것 외에도 웹사이트를 더욱 사용자 친화적으로 만들고 더 많은 트래픽을 유도하는 데 중요한 역할을 합니다. 글꼴 색상과 글꼴도 사용하는 컴퓨터와 브라우저에 따라 달라지며, HTML 태그는 웹사이트의 텍스트에 스타일, 색상, 크기를 추가하는 데에도 사용됩니다.

<기본 글꼴> 태그는 웹사이트나

태그 내부에 있는 모든 텍스트를 설정하는 데 사용됩니다. 요소를 동일한 크기, 색상 및 얼굴로 만듭니다.  글꼴 태그는 글꼴 색상과 크기라는 세 가지 속성으로 구성되며, 이는 다시 웹사이트 내에 존재하는 다양한 글꼴 스타일의 중요한 구성 요소를 형성합니다.

<글꼴> 태그는 가장 일반적으로 사용되며 웹페이지에 대한 좋은 모양과 느낌을 구축하는 데 사용할 수 있는 가장 중요한 태그 중 하나입니다. 열린 태그는 에 의해 닫히지 않는 한 동일한 방식으로 유지됩니다. 태그.

기본 HTML 글꼴 스타일 중 일부를 살펴보겠습니다.

HTML 글꼴 스타일과 관련된 몇 가지 기본 기능과 특성은 다음과 같습니다.

1. 글꼴 크기 설정

크기 속성을 활용하여 콘텐츠 글꼴 크기를 설정할 수 있습니다. 허용되는 범위 값은 가장 작은 숫자인 1부터 가장 큰 숫자인 7까지입니다. 모든 글꼴 유형의 기본 크기는 3입니다.

<!DOCTYPE html>
<html>
<head>
<title>Setting Basic 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>

2. 상대적인 글꼴 크기

상대 글꼴 크기는 현재 존재하는 글꼴 크기보다 더 큰 크기와 작은 크기의 수를 결정하고 지정하는 데 사용됩니다. 다음과 같이 지정할 수 있습니다.

<font size = "+f"> or by writing <font size = "−f">

<!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>

3. 글꼴 설정

글꼴 크기 및 상대적 글꼴 크기 설정 다음으로 또 다른 항목은 글꼴 설정입니다. 이는 위에 나열된 속성의 중요한 부분을 구성합니다. 이는 얼굴 속성을 사용하여 설정할 수 있지만, 이 글꼴 값을 사용하도록 지정된 사용자의 시스템에 이 글꼴이 설치되어 있지 않으면 해당 글꼴을 볼 수 없다는 점을 항상 명심해야 합니다. 대신 해당 특정 사용자의 컴퓨터에 적용 가능한 기본 글꼴만 표시됩니다.

<!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 /&gt
<font face = "Bedrock" size = "5">Bedrock</font><br />
</body>
</html>

4. 대체 글꼴 지정

  • 이는 사용자가 시스템에 특정 글꼴을 설치한 경우에만 다양한 종류의 글꼴을 지정하는 데 사용됩니다. 그렇지 않으면 기본 설치된 글꼴이 표시됩니다. 구체적으로 쉼표로 구분된 글꼴 이름을 나열하여 두 개 이상, 특히 두 개 이상의 글꼴 대안을 언급할 수 있습니다.
  • 웹페이지가 로드되면 브라우저는 생성될 최초의 글꼴을 표시합니다. 제공된 글꼴이 시스템에 설치되어 있지 않으면 기본 글꼴인 Times New Roman이 성공적으로 표시됩니다.

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

5. 글꼴 색상 설정

이것은 HTML 글꼴 및 스타일 목록의 중요한 부분과 구성 요소를 형성하는 또 다른 속성입니다. 이 글꼴에서는 색상 속성을 사용하여 색상이 설정됩니다. 지정된 색상에 대한 16진수 코드와 색상 이름을 사용하여 필요한 색상을 요구할 수 있습니다.

<!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>

6. Element

  • This element is specific to HTML language and is supposed to provide the webpage with a default font size, typeface, and color for all the parts and components of the documents which are not contained inside the tag.
  • The tag could be easily used to override the settings.
  • This tag also makes use of color, face and size attributes which will relatively support all the font settings by providing the size of a value of +1 for one size greater or -2 for two sizes smaller.

Example,

<!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>
</body>
</html>

Conclusion

HTML font and styles are among the most critical components and features that cannot be overlooked and can give a very good shape and design to your website. When we talk about the latest javascript libraries available in the market, they contain all these and several other font and styles. For the basic HTML, this still needs to be done manually. I hope you liked our article. Stay tuned to our blog for more articles like these.

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

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
이전 기사:HTML 이벤트다음 기사:HTML 이벤트