CSS3 글꼴
CSS3 Fonts
CSS3 @font-face Rules
이전 버전의 CSS3에서는 웹 디자이너가 사용자의 컴퓨터에 이미 설치된 글꼴을 사용해야 했습니다.
CSS3를 사용하면 웹 디자이너가 원하는 글꼴을 사용할 수 있습니다.
사용하려는 글꼴 파일을 찾았을 때 웹사이트에 글꼴 파일을 포함하기만 하면 필요한 사용자에게 자동으로 다운로드됩니다.
선택한 글꼴은 @font-face 규칙을 사용하여 새로운 CSS3 버전에 설명되어 있습니다.
"자신의" 글꼴은 CSS3 @font-face 규칙에 정의되어 있습니다.
필요한 글꼴 사용
새로운 @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 규칙을 추가해야 합니다.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
<style>
@font-face
{
font-family: myFirstFont;
src: url(sansation_light.woff);
}
@font-face
{
font-family: myFirstFont;
src: url(sansation_bold.woff);
font-weight:bold;
}
div
{
font-family:myFirstFont;
}
</style>
</head>
<body>
<div>
使用CSS3,网站终于可以使用字体以外的预先选择“合法”字体。
</div>
<p><b>注意:</b> Internet Explorer 8以及更早版本的浏览器 @font-face rule.</p>
</body>
</html>파일 "Sansation_Bold.ttf"는 Sansation 글꼴 Bold 글꼴이 포함된 또 다른 글꼴 파일입니다.
이 텍스트에 "myFirstFont" 글꼴 계열을 사용하는 브라우저는 해당 텍스트를 굵게 표시해야 합니다.
이렇게 하면 동일한 글꼴에 대해 많은 @font-face 규칙을 가질 수 있습니다.
CSS3 글꼴 설명
다음 표에는 모든 글꼴 설명과 내부의 @font-face 규칙 정의가 나열되어 있습니다.
글꼴 모음
| 필수입니다. 글꼴의 이름을 지정합니다. | src | |
|---|---|---|
| URL | 필수입니다. 글꼴 파일의 URL을 정의합니다. | 글꼴-스트레치 |
| normal | 응축 | 초응축추가응축 |
| expanded |
| oblique|
| 100200 | |
| 400 |
| |
현재 코스웨어를 다운로드할 수 없습니다. 현재 직원들이 정리하고 있습니다. 앞으로도 본 강좌에 많은 관심 부탁드립니다~ 