>웹 프론트엔드 >CSS 튜토리얼 >CSS로 웹사이트에 비표준 글꼴을 추가하는 방법은 무엇입니까?

CSS로 웹사이트에 비표준 글꼴을 추가하는 방법은 무엇입니까?

PHPz
PHPz앞으로
2023-08-22 09:37:021195검색

CSS로 웹사이트에 비표준 글꼴을 추가하는 방법은 무엇입니까?

비표준 글꼴은 대부분의 브라우저에서 사용할 수 있는 기본 글꼴 세트에 속하지 않는 CSS의 모든 글꼴을 의미합니다. 기본 글꼴에는 Arial, Times New Roman 및 Verdana가 포함되며, 이는 대부분의 컴퓨터와 장치에 사전 설치되어 제공되므로 표준 글꼴입니다.

비표준 글꼴은 사전 설치되지 않은 글꼴이며 사용하려면 웹 사이트에 특별히 로드해야 합니다. 이러한 글꼴은 Google, Adobe 또는 MyFonts와 같은 웹사이트에서 얻을 수 있습니다. 맞춤 설계하거나 구매할 수도 있습니다.

비표준 글꼴을 사용하면 웹사이트 디자인에 독특하고 개인적인 느낌을 더할 수 있습니다. 특정 룩을 연출하거나 브랜드의 시각적 아이덴티티를 확립하는 데 자주 사용됩니다.

CSS로 웹사이트에 일부 비표준 글꼴을 추가하세요

타이포그래피는 웹사이트를 디자인할 때 중요한 역할을 합니다. Arial, Times New Roman 및 Verdana와 같이 CSS에서 제공되는 기본 글꼴은 기능적으로는 사용 가능하지만 종종 단조롭고 일반적으로 보입니다.

@font-face 규칙을 사용하면 페이지의 특정 요소에 글꼴을 적용할 수 있도록 글꼴 파일 및 속성을 지정할 수 있습니다.

구문

@font-face 규칙을 사용하는 구문은 다음과 같습니다 -

으아악

이 예에서는 CSS 전체에서 이 글꼴을 참조하는 데 사용되는 이름인 'MyFont'로 글꼴 모음을 지정했습니다. 'src' 속성은 글꼴 파일의 위치를 ​​지정하고, 'format' 속성은 글꼴의 파일 형식을 지정합니다. 더 나은 브라우저 호환성을 위해 truetype, woff, woff2, eot 등과 같은 여러 글꼴 형식을 포함하는 것이 좋습니다.

@font-face 규칙을 사용하여 글꼴을 정의하면 'font-family' 속성을 사용하여 페이지의 특정 요소에 적용할 수 있습니다. 아래 예에서는 'body' 요소에 사용자 정의 글꼴 'MyFont'를 적용합니다 −

으아악

Example

의 중국어 번역은

Example

입니다. 으아악

@import를 사용하여 Google Fonts나 기타 글꼴 호스팅 서비스와 같은 원격 소스에서 글꼴을 가져올 수도 있습니다.

으아악

Example

의 중국어 번역은

Example

입니다. 으아악

결론

위 단계를 통해 웹사이트에 비표준 글꼴을 성공적으로 추가했습니다. 글꼴이 올바르게 렌더링되도록 하려면 글꼴 파일이 서버에서 호스팅되고 브라우저에서 액세스할 수 있는지 확인하는 것이 중요합니다.

위 내용은 CSS로 웹사이트에 비표준 글꼴을 추가하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명:
이 기사는 tutorialspoint.com에서 복제됩니다. 침해가 있는 경우 admin@php.cn으로 문의하시기 바랍니다. 삭제