Computer >> 컴퓨터 >  >> 프로그래밍 >> JavaScript

HTML에서 텍스트 글꼴(font-family)을 설정하는 방법

HTML에서 텍스트의 글꼴 모음(폰트 패밀리)을 변경하려면 style 속성을 사용합니다. style 속성은 요소에 인라인 스타일을 지정하는 방식으로, HTML <p> 태그와 함께 CSS 속성인 font-family를 사용해 글꼴을 지정할 수 있습니다.

참고로 HTML5에서는 더 이상 <font> 태그를 지원하지 않기 때문에, 글꼴 크기나 종류 등 텍스트 스타일은 반드시 CSS로 적용해야 합니다.

style 속성 사용 시 주의사항

style 속성으로 지정한 인라인 스타일은 전역(global)으로 설정된 다른 스타일보다 우선 적용됩니다. 즉, HTML 문서 내의 <style> 태그나 외부 스타일 시트에 정의된 스타일이 있더라도, style 속성에 직접 작성한 값이 그보다 높은 우선순위를 가지게 됩니다.

HTML에서 텍스트 글꼴(font-family)을 설정하는 방법

예제 코드

아래 코드를 실행하면 HTML 페이지에서 텍스트 글꼴 모음을 변경하는 결과를 직접 확인할 수 있습니다.

<!DOCTYPE html>
<html>
    <head>
        <title>HTML Font Family</title>
    </head>

    <body>
        <h1>Our Products</h1>
        <p style="font-family:georgia,garamond,serif;">
            This is demo text
        </p>
    </body>
</html>

위 예제에서는 <p> 태그의 style 속성에 font-family:georgia,garamond,serif;를 지정했습니다. 이 경우 브라우저는 먼저 Georgia 글꼴로 표현을 시도하고, 해당 글꼴이 없으면 Garamond, 마지막으로 기본 세리프(serif) 계열 글꼴로 대체하여 화면에 표시합니다.