이미지나 그래픽을 사용하지 않고 내 웹사이트에 사용자 정의 글꼴을 어떻게 추가할 수 있나요?

그래픽이 없는 웹사이트에 사용자 정의 글꼴 통합

이미지, 플래시 또는 그래픽의 사용을 피할 때 고유한 글꼴을 추가하여 웹사이트의 미학을 향상시키는 것은 어려울 수 있습니다. . 이 가이드에서는 CSS를 사용하여 비표준 글꼴을 웹사이트에 원활하게 통합하는 방법을 살펴봅니다.

CSS 글꼴 통합

CSS는 웹 페이지 내에 사용자 정의 글꼴을 포함하는 전용 메커니즘을 제공하므로 그래픽 글꼴이 필요하지 않습니다. 강요. @font-face 규칙을 사용하면 개발자가 사용자 정의 글꼴과 해당 소스를 지정하여 브라우저에서 이를 다운로드하고 표시할 수 있도록 렌더링할 수 있습니다.

샘플 코드

라는 이름의 사용자 정의 글꼴에 대해 다음 코드 조각을 고려하세요. "My Custom Font":

<style type="text/css">
@font-face {
    font-family: "My Custom Font";
    src: url(http://www.example.org/mycustomfont.ttf) format("truetype");
}
p.customfont { 
    font-family: "My Custom Font", Verdana, Tahoma;
}
</style>
<p>

이 코드에서 @font-face 규칙은 다음을 가리키는 소스 URL로 사용자 정의 글꼴을 정의합니다. 트루타입 글꼴 파일(.ttf). src 속성은 TTF, WOFF 및 EOT를 포함한 여러 글꼴 형식을 지원하여 다양한 브라우저와의 호환성을 보장합니다.

클래스 선택기 p.customfont는 단락 태그 내의 요소에 사용자 정의 글꼴을 할당하여 시각적 표현을 제공합니다. 추가된 글꼴.

브라우저 지원

CSS 글꼴 통합은 Chrome, Firefox, Safari 및 가장자리. TTF(트루타입 글꼴), WOFF(Web Open Font Format) 및 EOT(Embedded Opentype)는 모든 일반 브라우저에서 채택된 널리 지원되는 글꼴 형식입니다.

이 기술을 수용함으로써 웹사이트 개발자는 확장할 수 있습니다. 인쇄 옵션을 제공하여 사용자 경험을 향상하고 특정 디자인 미학을 충족하는 시각적으로 매력적인 웹사이트를 만듭니다.

위 내용은 이미지나 그래픽을 사용하지 않고 내 웹사이트에 사용자 정의 글꼴을 어떻게 추가할 수 있나요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!