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

Question

글꼴 이름이 지정된 폴더에 두 개의 사용자 정의 글꼴이있는 폴더가 있으며 그 중 하나의 이름은 PlayfairDisplay-Black입니다. 내가 개발하고있는 사이트에서 어떻게 사용하는지 모르겠습니다.

어떻게이 글꼴을 사용할 수 있습니까?

Answer 1

특별한 CSS @ font-face 선언은 여러 브라우저가 여러 가지 두통을 유발하지 않으면 서 필요한 적절한 글꼴을 선택하는 데 도움이됩니다.

@font-face{ 
    font-family: 'MyWebFont'; 
    src: url('WebFont.eot'); 
    src: url('WebFont.eot?#iefix') format('embedded-opentype'), 
     url('WebFont.woff') format('woff'), 
     url('WebFont.ttf') format('truetype'), 
     url('WebFont.svg#webfont') format('svg'); 
} 

당신이 할 일은 다음과 같이 당신의 HTML에 스타일 시트에 대한 링크입니다 :

<link rel="stylesheet" href="stylesheet.css" type="text/css" charset="utf-8" /> 

새 글꼴을 활용하려면, 당신이 그들을 사용하는 스타일 시트를 알려야합니다. 위의 원래 @ font-face 선언을보고 "font-family"라는 속성을 찾으십시오. 거기에 링크 된 이름은 글꼴을 참조하기 위해 사용하는 이름이됩니다. 변경하고자하는 셀렉터 안의 "font-family"속성의 폰트 스택에 웹 폰트 이름을 추가하십시오. 예를 들어 :

p { font-family: 'MyWebFont', Arial, sans-serif; } 

Answer 2

은 CSS에서이 시도 :

.myclassname { 
    font-family: 'MyFairFont'; 
} 

Answer 3

당신은 당신이 https://www.fontsquirrel.com/tools/webfont-generator 또는 쉽게 원하는 것을 얻을 수 있습니다

다음

@font-face { 
    font-family: 'MyFairFont'; /*to use later*/ 
    src: url('http://exampledomain.com/fonts/PlayfairDisplay-Black.ttf'); /*URL to the font*/ 
} 

는 특정 요소에 글꼴을 사용하는 https://www.web-font-generator.com/ 거기에 글꼴을 업로드하고 대다수의 브라우저 및 해당 글꼴을 호출하는 CSS에서 작동하는 데 필요한 형식으로 글꼴을 가져올 수 있습니다. 프로젝트에 글꼴을 업로드하고 제공하는 CSS 스 니펫을 포함하고 글꼴을 올바르게 연결하면됩니다.

Answer 4

당신은 다음과 같이 당신의 HTML에서 글꼴 스타일에 링크 할 필요가 :

<link rel="stylesheet" href="fonts/fonts.css" type="text/css" /> 

fontsquirrel.com 또는 transfonter.org 같은 타사 응용 프로그램에서 글꼴 얼굴을 생성하여 글꼴 파일을 첨부 한 후처럼 CSS를 글꼴에 추가

@font-face { 
    font-family: 'open_sansregular'; 
    src: url('fonts/opensans-regular-webfont.eot'); 
    src: url('fonts/opensans-regular-webfont.eot?#iefix') format('embedded-opentype'), 
     url('fonts/opensans-regular-webfont.woff2') format('woff2'), 
     url('fonts/opensans-regular-webfont.woff') format('woff'), 
     url('fonts/opensans-regular-webfont.ttf') format('truetype'), 
     url('fonts/opensans-regular-webfont.svg#open_sansregular') format('svg'); 
    font-weight: normal; 
    font-style: normal; 
} 

변경하려는 선택기 내에서 "font-family"속성의 글꼴 스택 앞에 해당 웹 글꼴 이름을 추가하십시오. 예를 들면 :

p { font-family: 'open_sansregular'; } 

참고 : 이 더 이상 적용 webfont 패턴을 기반으로합니다. eot는 IE8을 제외하고는 사용되지 않습니다. svg는 말 그대로 더 이상 유지 관리되지 않는 형식이며, 대부분의 주요 브라우저에서 적극적으로 제거되었으며, WOFF는 ttf 및 otf 소스를 지원하는 모든 브라우저에서 byte-for-byte 래퍼입니다 ttf/otf도 WOFF를 지원하므로 두 가지 모두를로드 할 필요가 없습니다. 최신 브라우저의 경우 WOFF (필요하다면 WOFF2를로드하지만 여전히 지원되지는 않습니다.)가 필요합니다. IE8- 지원이 필요하다면 eot를 추가하십시오. 필요한 두 가지만 있습니다. 지식을 위해서만 다른 파일을 첨부합니다.