CSS3 글꼴
웹 페이지에서는 CSS의 글꼴 계열 속성을 사용하여 글꼴을 정의할 수 있습니다. 그러나 정의된 글꼴이 사용자의 컴퓨터에 올바르게 표시될 수 있는지 여부는 사용자의 컴퓨터에 글꼴이 설치되어 있는지 여부에 따라 다릅니다. 일부 외국 개인 웹사이트에서 매우 아름다운 글꼴을 사용하는 것을 종종 볼 수 있지만 이러한 글꼴은 일반적으로 사용자 컴퓨터에 설치되지 않으므로 글꼴 계열 속성을 사용하여 구현할 수 없습니다. 오늘은 개인화된 @font-face 구현 사용을 소개하겠습니다. 글꼴.
@font-face가 CSS3의 새로운 기능이라고 말하는 것은 정확하지 않습니다. 왜냐하면 CSS2는 이미 이 기능을 지원하고 있으며 Internet Explorer는 이미 버전 5부터 이를 지원했지만 IE는 자체 eot(Embeded Open 유형) 글꼴 형식으로, 다른 브라우저에서는 이 형식을 지원하지 않습니다. @font-face는 다음 속성을 지원합니다:
font-family: 텍스트의 글꼴 이름을 설정합니다.
글꼴 스타일: 텍스트 스타일을 설정합니다.
Font-variant: 텍스트가 대문자인지 소문자인지 설정합니다.
글꼴 두께: 텍스트의 두께를 설정합니다.
Font-stretch: 텍스트를 가로로 늘릴지 여부를 설정합니다.
Font-size: 텍스트 글꼴 크기를 설정합니다.
src: 사용자 정의 글꼴의 상대 경로 또는 절대 경로를 설정합니다.
필요한 글꼴 사용
새로운 @font-face 규칙에서는 먼저 글꼴 이름(예: myFirstFont)을 정의한 다음 글꼴 파일을 가리켜야 합니다.
팁: URL에는 소문자 글꼴을 사용하세요. IE에서는 대문자를 사용하면 예기치 않은 결과가 발생합니다.
HTML 요소에 글꼴을 사용해야 하는 경우 글꼴 패밀리 속성을 통해 글꼴을 참조하세요. 이름(myFirstFont):
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
<style>
@font-face
{
font-family: myFirstFont;
src: url('Sansation_Light.ttf')
,url('Sansation_Light.eot'); /* IE9 */
}
div
{
font-family:myFirstFont;
}
</style>
</head>
<body>
<p><b>注意:</b> Internet Explorer 9 只支持 .eot 格式的字体.</p>
<div>
使用CSS3,网站终于可以使用字体以外的预先选择“合法”字体
</div>
</body>
</html>다채로운 페이지를 원한다면 더 많은 글꼴 스타일이 필요합니다. 사람들은 @font-face 솔루션 외에도 sIFR, Cufon, Typeface.js도 있습니다. , etc. 및 .webfont 간단히 말해서 .webfont에는 글꼴에 포함된 액세스 권한 테이블이 있습니다. 브라우저는 권한 정보를 읽고 이러한 글꼴을 다운로드하고 렌더링해야 하는지 결정할 수 있습니다. 또한 Typekit은 호출을 위해 타사 서버에 글꼴을 배치하는 것도 주목할 만한 솔루션입니다. 이러한 솔루션의 장점과 단점은 나중에 자세히 소개하겠습니다.
다음 섹션