지역 사회 배우다 도구 라이브러리 여가
찾다
한국어

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글꼴-스트레치normal초응축추가응축반응축expandedoblique선택 사항. 글꼴의 스타일을 정의합니다. 기본값은 "정상"입니다. 100200300400지속적인 학습
||
<!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>
제출하다코드 재설정
이전 섹션 다음 섹션
튜토리얼 목록
도움을 받다
  • 코스 추천
  • 코스웨어 다운로드
현재 코스웨어를 다운로드할 수 없습니다. 현재 직원들이 정리하고 있습니다. 앞으로도 본 강좌에 많은 관심 부탁드립니다~

이 강좌를 시청한 학생들도 학습하고 있습니다.

최신 ThinkPHP 5.1 세계 최초 비디오 튜토리얼(PHP 전문가 온라인 교육 과정이 되기까지 60일)  492424회 재생
URL필수입니다. 글꼴 파일의 URL을 정의합니다.
응축
    반확장
    • extra- 확장
  • 초확장
  • 선택사항. 글꼴을 늘리는 방법을 정의합니다. 기본값은 "정상"입니다.
  • 글꼴 스타일
  • normal
  • italic
    글꼴 무게
  • normal
  • bold
    500
  • 600
  • 7 00
  • 800
  • 900
  • 선택사항입니다. 글꼴의 두께를 정의합니다. 기본값은 "정상"입니다.
  • unicode-range
  • unicode-range
  • 선택사항. 글꼴이 지원하는 UNICODE 문자의 범위를 정의합니다. 기본값은 "U+0-10FFFF"입니다.