@ font-face src : local-사용자가 이미 가지고있는 경우 로컬 글꼴을 사용하는 방법?


82

@font-face사용자가 이미 글꼴을 가지고있는 경우 브라우저가 글꼴을 다운로드하지 않도록하는 올바른 사용 방법은 무엇입니까 ?

내 시스템 (리눅스)에 이미 설치된 DejaVu를 정의하기 위해 @ font-face를 사용하고 있습니다. Firefox는 글꼴을 다운로드하지 않지만 Chromium은 매번 다운로드합니다!

글꼴 다람쥐그 질문을 기반으로 한 내 CSS 코드는 다음과 같습니다.

@font-face {
    font-family: 'DejaVu Serif';
    src: url('DejaVuSerif-webfont.eot');
    src: local('DejaVu Serif'), url('DejaVuSerif-webfont.woff') format('woff'), url('DejaVuSerif-webfont.ttf') format('truetype'), url('DejaVuSerif-webfont.svg#webfontCFu7RF0I') format('svg');
    font-weight: normal;
    font-style: normal;
}

/* ... @font-face definitions for italic and bold omitted ... */

@font-face {
    font-family: 'DejaVu Serif';
    src: url('DejaVuSerif-BoldItalic-webfont.eot');
    src: local('DejaVu Serif Bold Italic'), url('DejaVuSerif-BoldItalic-webfont.woff') format('woff'), url('DejaVuSerif-BoldItalic-webfont.ttf') format('truetype'), url('DejaVuSerif-BoldItalic-webfont.svg#webfontQAewh7pf') format('svg');
    font-weight: bold;
    font-style: italic;
}

답변:


104

로컬 파일을 먼저 확인하려면 다음을 수행하십시오.

@font-face {
font-family: 'Green Sans Web';
src:
    local('Green Web'),
    local('GreenWeb-Regular'),
    url('GreenWeb.ttf');
}

여기서 수행 할 작업에 대한보다 자세한 설명 이 있습니다 .


3
srcOP의 예 에서처럼 2 초가 있으면 어떨까요? 우리 local는 첫 번째 또는 두 번째를 입습니까?
mpen 2015 년

-7

나는 실제로를 사용하지 않았기 font-face때문에 이것을 약간의 소금으로 가져 가십시오.하지만 브라우저가 주어진 웹 글꼴이 사용자의 컴퓨터에 설치되었는지 여부를 확실히 알 수있는 방법이 없다고 생각합니다.

예를 들어 사용자는 동일한 이름을 가진 다른 글꼴을 컴퓨터에 설치할 수 있습니다. 확실히 알 수있는 유일한 방법은 글꼴 파일이 동일한 지 비교하는 것입니다. 그리고 브라우저는 웹 글꼴을 먼저 다운로드하지 않고서는 그렇게 할 수 없습니다.

Firefox는 실제로 font선언 에서 글꼴을 사용할 때 글꼴을 다운로드합니까 ? (예 h1 { font: 'DejaVu Serif';)?


글쎄, 글꼴 이름 문제는 여기에 짧은 영향을 미치는 것 같습니다 (나는 전혀 문제가 없었습니다)
Thariama

네, 충돌은 없을 것 같아요. 계속해.
Paul D. Waite

5
css의 font / font-family는 브라우저가 아무것도 다운로드하지 않게합니다. 로컬에서 글꼴을 찾지 못하면 무시합니다. 이것이 우리가 일반적으로 글꼴 스택 (글꼴 목록)을 사용하는 이유입니다. 첫 번째가 없으면 두 번째를 시도하는 식입니다. @ font-face는 비교적 "새로운"것입니다 ( stackoverflow.com/questions/2219916/is-font-face-usable-now )
dbarbosa

@dbarbosa : 나는 방법을 알고 font/ font-family일. 나는 분명히 어떻게 @font-face작동 하는지 모른다 !
Paul D. Waite
당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.