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 중국어 웹사이트의 기타 관련 기사를 참조하세요!

핫 AI 도구

Undresser.AI Undress
사실적인 누드 사진을 만들기 위한 AI 기반 앱

AI Clothes Remover
사진에서 옷을 제거하는 온라인 AI 도구입니다.

Undress AI Tool
무료로 이미지를 벗다

Clothoff.io
AI 옷 제거제

AI Hentai Generator
AI Hentai를 무료로 생성하십시오.

인기 기사

뜨거운 도구

메모장++7.3.1
사용하기 쉬운 무료 코드 편집기

SublimeText3 중국어 버전
중국어 버전, 사용하기 매우 쉽습니다.

스튜디오 13.0.1 보내기
강력한 PHP 통합 개발 환경

드림위버 CS6
시각적 웹 개발 도구

SublimeText3 Mac 버전
신 수준의 코드 편집 소프트웨어(SublimeText3)

뜨거운 주제











이것은 우리가 양식 접근성에 대해 한 작은 시리즈의 세 번째 게시물입니다. 두 번째 게시물을 놓친 경우 "사용자 초점 관리 : Focus-Visible"을 확인하십시오. ~ 안에

CSS Box-Shadow 및 개요 속성은 주제를 얻었습니다. 실제 테마에서 어떻게 작동하는지에 대한 몇 가지 예와 이러한 스타일을 WordPress 블록 및 요소에 적용 해야하는 옵션을 보자.

이 튜토리얼은 Smart Forms 프레임 워크를 사용하여 전문적인 JavaScript 양식을 작성하는 것을 보여줍니다 (참고 : 더 이상 사용할 수 없음). 프레임 워크 자체를 사용할 수 없지만 원칙과 기술은 다른 형태의 건축업자와 관련이 있습니다.

Svelte Transition API는 맞춤형 전환을 포함하여 문서를 입력하거나 떠날 때 구성 요소를 애니메이션하는 방법을 제공합니다.

이 기사는 Envato Market에서 사용할 수있는 최고의 PHP 양식 빌더 스크립트를 탐색하여 기능, 유연성 및 설계를 비교합니다. 특정 옵션으로 다이빙하기 전에 PHP 양식 빌더가 무엇인지, 왜 사용하는지 이해해 봅시다. PHP 양식

웹 사이트의 컨텐츠 프레젠테이션을 설계하는 데 얼마나 많은 시간을 소비합니까? 새 블로그 게시물을 작성하거나 새 페이지를 만들 때

NPM 명령은 서버 시작 또는 컴파일 코드와 같은 것들에 대한 일회성 또는 지속적으로 실행되는 프로세스로 다양한 작업을 실행합니다.
