简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)

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일)  492170회 재생
회사 소개 부인 성명 Sitemap
PHP 중국어 웹사이트：공공복지 온라인 PHP 교육，PHP 학습자의 빠른 성장을 도와주세요！
URL필수입니다. 글꼴 파일의 URL을 정의합니다.
응축
    반확장
    • extra- 확장
  • 초확장
  • 선택사항. 글꼴을 늘리는 방법을 정의합니다. 기본값은 "정상"입니다.
  • 글꼴 스타일
  • normal
  • italic
    글꼴 무게
  • normal
  • bold
    500
  • 600
  • 7 00
  • 800
  • 900
  • 선택사항입니다. 글꼴의 두께를 정의합니다. 기본값은 "정상"입니다.
  • unicode-range
  • unicode-range
  • 선택사항. 글꼴이 지원하는 UNICODE 문자의 범위를 정의합니다. 기본값은 "U+0-10FFFF"입니다.