CSS에서 글꼴을 사용자 정의하는 방법

CSS에서 글꼴을 사용자 정의하는 방법: 1. 글꼴 파일을 다운로드합니다. 2. "@font-face" 규칙과 글꼴 계열 및 src 속성을 사용하여 글꼴 파일을 소개합니다. -family: '글꼴 이름';src:url('파일 주소');}".

이 튜토리얼의 운영 환경: Windows 7 시스템, CSS3 버전, Dell G3 컴퓨터.

해외의 개인 웹사이트를 탐색할 때

와 같은 매우 개인화된 글꼴을 항상 찾을 수 있습니다. 하지만 컴퓨터에 설치된 글꼴이 제한되어 있기 때문에 현재로서는 원하는 글꼴을 찾을 수 없는 경우가 많습니다. CSS3에서 제공하는 @font-face를 사용하여 개인화된 글꼴을 구현합니다.

그러나 @font-face가 CSS3의 새로운 기능이라고 말하는 것은 정확하지 않습니다. 이 기능은 이미 CSS2에서 지원되었고 IE 브라우저도 당시 지원했지만 다른 브라우저에서는 아직 지원하지 않았기 때문입니다. 현재 모든 주요 브라우저는 이미 이 새로운 기능을 지원하고 있습니다. 이 기능을 구체적으로 어떻게 사용하나요? 아래 코드를 보세요.

nbsp;html>


    <meta>
    <title>Document</title>
    <style>
    @font-face{
            font-family:myFont;
            src:url(&#39;rajdhani-bold.ttf&#39;)，url(&#39;rajdhani-bold.eot&#39;);
        }
        p{
            font-family: myFont;
        }
    </style>


    <div>
        <p>Ha,those words will be changed.</p>
    </div>

먼저: CSS에 @font-face를 도입하고, 글꼴 패밀리를 사용하여 원하는 글꼴 이름을 설정해야 합니다. 여기서는 myFont로 사용합니다(물론 yourFont일 수도 있습니다. 등).

두 번째: 좋아하는 글꼴을 다운로드해야 합니다. 하지만 다음 사항을 알아두세요: Firefox, Chrome, Safari 및 Opera는 .ttf(트루타입 글꼴) 및 .otf(오픈타입 글꼴) 유형 글꼴을 지원합니다. 그리고 Internet Explorer 9+는 새로운 @font-face 규칙을 지원하지만 .eot 유형 글꼴(Embedded OpenType)만 지원합니다.

Font Squirrel(https://www.fontsquirrel.com/) 이 무료 글꼴 리소스 웹사이트에는 다운로드할 수 있는 다양한 글꼴이 있으며, 대부분은 otf 및 ttf 형식의 글꼴입니다. 또한, defont.com(http://www.dafont.com/)도 무료 글꼴 리소스 웹사이트이며 다운로드 형식은 일반적으로 ttf입니다.

분명히 이 두 웹사이트에서 다운로드한 기본 글꼴은 IE 브라우저와 호환되지 않습니다. 이를 위해 TTF to EOT 글꼴 변환기(https://www.kirsle.net/wizards/ttf2eot.cgi) 글꼴 변환 도구를 사용하여 ttf 형식의 글꼴을 IE 브라우저와 호환되도록 eot 형식으로 변환할 수 있습니다.

하지만 최고의 글꼴 변환 도구는 Font Squirrel(https://www.fontsquirrel.com/tools/webfont-generator)에서 제공하는 생성기입니다. 입력 후 전문가 옵션을 선택하여 다양한 글꼴 형식 간에 변환하세요.

셋째: 다운로드 후 파일의 압축을 풀고 글꼴 변환 도구를 통해 IE 호환 eot 형식으로 변환합니다. 예를 들어 src:url("rajdhani-bold.ttf"), url("rajdhani-bold.eot")을 사용하여 글꼴을 가져옵니다. 여기서 url은 상대 경로 또는 절대 경로입니다.

넷째: 이때 CSS의 글꼴 모음을 통해 나만의 맞춤 글꼴을 추가할 수 있습니다.

맞춤 글꼴 사용 전 텍스트:

맞춤 글꼴 사용 후 텍스트:

(동영상 공유 학습: css 동영상 튜토리얼)

위 내용은 CSS에서 글꼴을 사용자 정의하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!