CSS3 튜토리얼-글꼴

프런트엔드 개발 프로그래머 여러분, CSS3 tutorial-@font-face를 사용하여 개인화된 글꼴을 구현하는 방법에 대해 얼마나 알고 계시나요? 오늘은 CSS3 @font-face를 소개하겠습니다. 관심이 있으시면 자세히 알아볼 수 있습니다.

웹 페이지에서는 CSS의 글꼴 계열 속성을 사용하여 글꼴을 정의할 수 있습니다. 그러나 정의된 글꼴이 사용자의 컴퓨터에 올바르게 표시될 수 있는지 여부는 사용자의 컴퓨터에 글꼴이 설치되어 있는지 여부에 따라 다릅니다. 일부 외국 개인 웹사이트에서 매우 아름다운 글꼴을 사용하는 것을 종종 볼 수 있지만 이러한 글꼴은 일반적으로 사용자 컴퓨터에 설치되지 않으므로 글꼴 계열 속성을 사용하여 구현할 수 없습니다. 오늘은 개인화된 @font-face 구현 사용을 소개하겠습니다. 글꼴.

CSS3 @font-face 규칙:

CSS3 이전에는 웹 디자이너가 사용자 컴퓨터에 이미 설치된 글꼴을 사용해야 했습니다.

CSS3를 사용하면 웹 디자이너가 원하는 글꼴을 사용할 수 있습니다.

사용하고 싶은 글꼴을 찾거나 구매할 때 해당 글꼴 파일을 웹 서버에 저장해 두었다가 필요할 때 사용자의 컴퓨터에 자동으로 다운로드할 수 있습니다.

"자신의" 글꼴은 CSS3 @font-face 규칙에 정의되어 있습니다.

@font-face는 다음 속성을 지원합니다.

font-family: 텍스트의 글꼴 이름을 설정합니다.

font-style: 텍스트 스타일을 설정합니다.

font-variant: 텍스트가 대문자인지 소문자인지를 설정합니다.

font-weight: 텍스트의 두께를 설정합니다.

font-stretch: 텍스트를 가로로 늘릴지 여부를 설정합니다.

font-size: 텍스트 글꼴 크기를 설정합니다.

src: 사용자 정의 글꼴의 상대 경로 또는 절대 경로를 설정합니다.

브라우저 지원:

Firefox, Chrome, Safari 및 Opera는 .ttf(트루타입 글꼴) 및 .otf(오픈타입 글꼴) 유형 글꼴을 지원합니다.

Internet Explorer 9+는 새로운 @font-face 규칙을 지원하지만 .eot 유형 글꼴(Embedded OpenType)만 지원합니다.

참고: Internet Explorer 8 이하에서는 새로운 @font-face 규칙을 지원하지 않습니다.

필요한 글꼴 사용:

새로운 @font-face 규칙에서는 먼저 글꼴 이름(예: myFirstFont)을 정의한 다음 글꼴 파일을 가리켜야 합니다.

HTML 요소에 글꼴을 사용하려면 글꼴 계열 속성을 통해 글꼴 이름(myFirstFont)을 참조하세요.

예:

<style>
@font-face
{
font-family: myFirstFont;
src: url(‘Sansation_Light.ttf’),
url(‘Sansation_Light.eot’); /* IE9+ */
}
div
{
font-family:myFirstFont;
}
</style>

굵게 사용 글꼴 :

굵은 텍스트에 대한 설명자를 포함하는 다른 @font-face를 추가해야 합니다.

예:

@font-face
{
font-family: myFirstFont;
src: url(‘Sansation_Bold.ttf’),
url(‘Sansation_Bold.eot’); /* IE9+ */
font-weight:bold;
}

"Sansation_Bold.ttf" 파일은 또 다른 A입니다. Sansation 글꼴의 굵은 문자가 포함된 글꼴 파일입니다.

브라우저는 글꼴 계열 "myFirstFont"가 포함된 텍스트를 굵게 표시해야 할 때마다 이 글꼴을 사용합니다.

이 방법으로 동일한 글꼴에 대해 많은 @font-face 규칙을 설정할 수 있습니다.

CSS3 글꼴 설명자:

다음 표에는 @font-face 규칙에 정의할 수 있는 모든 글꼴 설명자가 나열되어 있습니다.

설명자	값	설명
글꼴군	이름	이 필요합니다. 글꼴의 이름을 지정합니다.
src	URL	필수입니다. 글꼴 파일의 URL을 정의합니다.
글꼴 늘이기	보통 축소 초축소 초축소 반압축 확장 반확장 초확장 초확장	선택사항. 글꼴을 늘리는 방법을 정의합니다. 기본값은 "정상"입니다.
글꼴 스타일	일반 이탤릭체 사선	선택 . 글꼴의 스타일을 정의합니다. 기본값은 "정상"입니다.
글꼴 두께	보통 굵게 100 200 300 400 500 600 700 800 900	선택사항. 글꼴의 두께를 정의합니다. 기본값은 "정상"입니다.
유니코드 범위	유니코드 범위	선택 사항입니다. 글꼴이 지원하는 UNICODE 문자의 범위를 정의합니다. 기본값은 "U+0-10FFFF"입니다.

위 내용은 CSS3 튜토리얼 - 글꼴 내용입니다. 더 많은 관련 내용은 PHP 중국어 홈페이지(www.php.cn)를 참고해주세요!