다채로운 CSS3 맞춤형 글꼴

페이지를 만들 때 "font-family"를 사용하여 글꼴을 정의하는 경우가 많습니다. 그러나 "font-family"를 사용하여 정의한 글꼴이 사용자의 브라우저에서 렌더링될 수 있는지 여부는 사용자의 컴퓨터에 우리가 정의한 글꼴이 있는지 여부에 따라 다릅니다. 글꼴이 설치되었습니다. 인터넷에서 흔히 볼 수 있는 일부 외국 웹사이트에서는 흔하지 않고 아름다운 글꼴이 사용되는데, 이러한 글꼴은 일반적으로 사용자의 컴퓨터에 설치되어 있지 않습니다. 그래서 오늘은 해당 페이지에서 글꼴이 설치되지 않는 방법을 소개하겠습니다. 사용자의 컴퓨터.

css3 @font-face

@font-face가 CSS3의 새로운 속성이라고 말하는 것은 실제로 부정확합니다. 이 기능은 이미 CSS2에서 지원되고 IE5에서는 이미 지원을 시작했지만 IE 방법은 eot 글꼴 형식을 사용하는 것입니다. 안타깝게도 다른 브라우저에서는 이 형식을 지원하지 않습니다.

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

CSS3 @font-face

@font-face가 CSS3의 새로운 기능이라고 말하는 것은 정확하지 않습니다. CSS2가 이미 이 기능을 지원하고 있고 Internet Explorer에서는 이미 버전 5부터 지원했기 때문입니다. IE는 자체 eot(Embeded Open Type) 글꼴 형식을 통해 이를 구현하며, 다른 브라우저에서는 이 형식을 지원하지 않습니다. @font-face는 다음 속성을 지원합니다:

　font-family: 텍스트의 글꼴 이름을 설정합니다.
　font-style: 텍스트 스타일을 설정합니다.
　font-variant: 텍스트가 대문자인지 소문자인지 설정합니다.
　font-weight: 텍스트의 두께를 설정합니다.
　font-stretch: 텍스트를 가로로 늘릴지 여부를 설정합니다.
　font-size: 텍스트 글꼴 크기를 설정합니다.
　Src: 사용자 정의 글꼴의 상대 경로 또는 절대 경로를 설정합니다.
　 @font-face 브라우저 호환성은 다음과 같습니다.

간단한 예

먼저 ChantelliAntiquaRegular라는 글꼴을 선언합니다.

@font-face {
    font-family: "ChantelliAntiquaRegular";
    src: url("Chantelli_Antiqua-webfont.eot");
    src: local("☺"), url("Chantelli_Antiqua-webfont.woff") format("woff"), url("Chantelli_Antiqua-webfont.ttf") format("truetype"), url("Chantelli_Antiqua-webfont.svg#webfontZjhIjbDc") format("svg");
    font-weight: normal;
    font-style: normal;
}

First The 첫 번째 src는 IE와 호환되고, 두 번째 src는 다른 브라우저와 호환됩니다. local("☺")은 클라이언트에서 글꼴을 로드하지 않기 위한 해킹 작성 방법입니다. 이 작성 방법에는 Android 시스템에 버그가 있습니다. 개선 계획은 다음과 같이 두 개의 @font-face를 선언하는 것입니다. 먼저 eot 글꼴 파일을 참조하는 @font-face를 선언하여 IE에서 제대로 작동하는지 확인하세요. 두 번째 @font-face는 다른 브라우저와의 호환성을 위해 여러 글꼴 형식을 참조합니다. 지원되는 형식은 동일한 글꼴을 여러 형식으로 사용할 수 있어야 함을 의미합니다. url(//:) format("no404")은 Bulletproof 작성 방법입니다.

기타 HTML 및 CSS 코드는 다음과 같습니다.

@font-face {
    font-family: "ChantelliAntiquaRegular";
    src: url("Chantelli_Antiqua-webfont.eot");
}
 
@font-face {
    font-family: "ChantelliAntiquaRegular";
    src: url(//:) format("no404"), url("Chantelli_Antiqua-webfont.woff") format("woff"), url("Chantelli_Antiqua-webfont.ttf") format("truetype"), url("Chantelli_Antiqua-webfont.svg#webfontMFqI76bT") format("svg");
    font-weight: normal;
    font-style: normal;
}

가장 중요한 효과는 다음과 같습니다.

무료 글꼴 웹사이트 Font Squirrel

Font Squirrel은 매우 우수한 무료 글꼴 리소스 웹사이트입니다. 웹 디자이너가 무료로 다운로드할 수 있는 고품질 글꼴이 많이 있습니다. 글꼴 형식 생성 도구인 @font-face 생성기도 있습니다. 글꼴 파일을 업로드하면 여러 글꼴 형식과 CSS 코드가 생성될 수 있어 매우 유용합니다. 훌륭한 무료 영어 글꼴이 필요하다면 이곳을 방문하세요.

다채로운 페이지를 원한다면 더 많은 글꼴 스타일이 필요합니다. 사람들은 @font-face 솔루션 외에도 sIFR, Cufon, Typeface.js 등의 다양한 글꼴 대안을 제시했습니다. , Webfont 간단히 말해서 .webfont에는 글꼴에 액세스 권한 테이블이 포함되어 있습니다. 브라우저는 권한 정보를 읽고 글꼴을 다운로드하고 렌더링해야 하는지 여부를 결정할 수 있습니다. 또한 Typekit은 호출을 위해 타사 서버에 글꼴을 배치하는 점도 주목할 만한 솔루션입니다. 이러한 솔루션의 장점과 단점은 나중에 자세히 소개하겠습니다.

위 내용은 다채로운 CSS3 맞춤형 글꼴의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!