CSS 외부 글꼴을 도입하는 방법은 무엇입니까? CSS 외부 글꼴 소개 소개

때로는 웹사이트 페이지에 보기 좋은 글꼴이 필요합니다. 결국 보기 좋은 글꼴은 전체 페이지를 사용자에게 더욱 아름답고 매력적으로 보이게 만들 것입니다. -글꼴이 멋있는데 오늘 이 글은 사진을 활용해서 보기 좋은 글꼴을 만드는 방법을 소개하는 것이 아니라, CSS에서 외부 글꼴을 소개하는 방법을 소개하고자 합니다.

더 이상 고민하지 말고 바로 본론으로 들어가겠습니다~

CSS 외부 글꼴을 도입할 때 사용해야 할 것은 CSS3의 @font-face, @font 입니다 -얼굴 그게 뭐죠? 살펴보자

@font-face는 CSS3의 모듈로, 주로 자체 정의된 웹 글꼴을 웹 페이지에 삽입합니다.

먼저 @font-face :

@font-face {
      font-family: <YourWebFontName>;
      src: <source> [<format>][,<source> [<format>]]*;
      [font-weight: <weight>];
      [font-style: <style>];
    }

font-family: < YourWebFontName> : 사용자 정의 글꼴 이름(일반적으로 가져온 글꼴의 이름으로 설정됨) 글꼴은 후속 스타일 규칙에서 이 이름으로 참조됩니다.

src : 글꼴의 로딩 경로와 형식을 설정하고 여러 로딩 경로와 형식을 쉼표로 구분합니다.

참고: src 속성 뒤에 로컬(글꼴 이름) 필드는 해당 글꼴이 사용자 시스템에서 로드되고 웹폰트가 실패한 후에만 로드됨을 나타냅니다.

src: local(font name), url("font_name.ttf")

srouce : 글꼴의 로딩 경로로, 절대 또는 상대 URL일 수 있습니다.

format : 브라우저 인식에 주로 사용되는 글꼴 형식에는 일반적으로 truetype, opentype, truetype-aat, Embedded-opentype, avg 등의 유형이 있습니다.

font-weight 및 글꼴 스타일은 이전에 사용된 것과 일치합니다.

그럼 css 외부 글꼴 도입 구현 방법을 살펴보겠습니다. :

첫 번째 단계는 CSS에 글꼴을 도입하고 이름을 지정하세요. 다음과 같이 적절한 이름을 선택하세요

먼저 글꼴을 다운로드하여 글꼴 디렉토리에 넣으세요

font.css:

@font-face {
 font-family: 'fontnameRegular';
 src: url('fontname.eot');
 src: local('fontname Regular'),
        local('fontname'),
        url('fontname.woff') format('woff'),
        url('fontname.ttf') format('truetype'),
        url('fontname.svg#fontname') format('svg');
}

#🎜🎜 #font-family는 글꼴 이름을 정의합니다. 다음 src는 글꼴 파일이 로드되는 위치입니다. URL이 여러 개인 이유는 브라우저 호환성 문제 때문입니다.

두 번째 단계는 다음과 같이 방금 정의한 글꼴을 사용하는 것입니다.

h1{font-family: fontnameRegular}

이 기사는 여기에서 끝납니다. 더 흥미로운 내용을 보려면 관련 튜토리얼 열을 참조하세요. PHP 중국어 웹사이트 ! ! !

위 내용은 CSS 외부 글꼴을 도입하는 방법은 무엇입니까? CSS 외부 글꼴 소개 소개의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!