CSS3 font-face 구식 브라우저 호환성 + 로컬 글꼴

Question

인터넷 에서뿐만 아니라 Stack Overflow에서도 찾아 보았습니다. 그러나 많은 사람들이이 주제를 다뤘지만 필자는이를 효과적으로 수행하는 방법을 모르겠습니다.

가능한 한 최대한의 호환성 범위로 CSS3 글꼴 - 페이스를 사용하여 사용 된 웹 글꼴이 이미 장치에 설치되어 있는지 확인합니다. 그런 다음 브라우저가 다운로드하는 대신 사용하도록하십시오.

이것은 내 시도입니다. 물론 예상대로 작동하지 않습니다. 예를 들어 Firefox는 내 webfont의 woff2 버전을 다운로드합니다.

@font-face{ 
    font-family: mplus-1c; 
    src: local('M+ 1c regular'), 
     local ('mplus-1c-regular'); 
    src: url('../fonts/mplus-1c-regular-webfont.eot'); 
    src: url('../fonts/mplus-1c-regular-webfont.eot?#iefix') format('embedded-opentype'), 
     url('../fonts/mplus-1c-regular-webfont.woff2') format('woff2'), 
     url('../fonts/mplus-1c-regular-webfont.woff') format('woff'), 
     url('../fonts/mplus-1c-regular-webfont.ttf') format('truetype'), 
     url('../fonts/mplus-1c-regular-webfont.svg#m_1cregular') format('svg'); 
    font-weight: normal; 
    font-style: normal; 
} 

Answer 1

Mr Lister는 절대적으로 옳습니다!

local ('mplus-1c-regular'); 

하는 했어야

local('mplus-1c-regular'); 

바보 나 : 는 또한 내가 작업에서 자신의 제안을 방지 아주 바보 같은 구문 오류를 발견했습니다.

다시 고마워, 리스터!

이

@font-face{ 
    font-family: mplus-1c; 
    src: url('../fonts/mplus-1c-regular-webfont.eot'); 
    src: url('../fonts/mplus-1c-regular-webfont.eot?#iefix') format('embedded-opentype'), 
     local('M+ 1c regular'), 
     local('mplus-1c-regular'), 
     url('../fonts/mplus-1c-regular-webfont.woff2') format('woff2'), 
     url('../fonts/mplus-1c-regular-webfont.woff') format('woff'), 
     url('../fonts/mplus-1c-regular-webfont.ttf') format('truetype'), 
     url('../fonts/mplus-1c-regular-webfont.svg#m_1cregular') format('svg'); 
    font-weight: normal; 
    font-style: normal; 
}