[css] CSS @ font-face-“src : local ( ‘☺’)”은 무슨 뜻입니까?

Program / 글쓴이

@font-face처음 사용 하고 fontsquirrel에서 글꼴 키트를 다운로드했습니다.

그들이 내 CSS에 삽입하도록 권장하는 코드는 다음과 같습니다.

@font-face {
    font-family: 'junctionregularRegular';
    src: url('Junction-webfont.eot');
    src: local('☺'),
        url('Junction-webfont.woff') format('woff'),
        url('Junction-webfont.ttf') format('truetype'),
        url('Junction-webfont.svg#webfontoNEpZXy2') format('svg');
}

이제, 웃는 얼굴이 엉망이되었습니다. 그러나 src의 URL 수도 마찬가지입니다. 왜 그렇게 많은 파일을 추천하고 페이지가 렌더링 될 때 모두 브라우저로 전송됩니까? .ttf를 제외한 모든 것을 제거 할 때 해가 있습니까?

답변

font-squirrel의 font-face generator에서 메모를 읽으면 paul irish의 메모임을 알 수 있습니다.

그의 블로그 게시물 에서 발췌 한 내용은 다음과 같습니다 .

그리고 .. @font-face문법 에 대해

이제 원래 방탄 구문보다 방탄 스마일 변형을 권장합니다.

@font-face {
  font-family: 'Graublau Web';
  src: url('GraublauWeb.eot');
  src: local('☺'),
       url('GraublauWeb.woff') format('woff'), url('GraublauWeb.ttf') format('truetype');
}

방탄 게시물에서 :

예, 웃는 얼굴입니다. OpenType 사양은 2 바이트 유니 코드 문자가 Mac의 글꼴 이름에서 전혀 작동하지 않음을 나타내므로 누군가가 그러한 이름의 글꼴을 실제로 릴리스 할 가능성을 줄입니다.

smiley가 더 나은 솔루션 인 몇 가지 이유가 있습니다.

  • Webkit + Font Management 소프트웨어는 글리프를 A 블록으로 바꾸는 것과 같은 로컬 참조를 망칠 수 있습니다.

  • OS X에서 Font Management 소프트웨어는 라이브러리 / 글꼴 외부에서 액세스 할 수있는 local () 글꼴에 액세스하려고 할 때 대화 상자를 표시하도록 시스템 설정을 변경할 수 있습니다. 내 방탄 게시물에 대한 자세한 내용. Font Explorer X는 Firefox에서 다른 것들을 망쳐 놓는 것으로 알려져 있습니다.

  • 가능성은 없지만 생각하는 것과 완전히 다른 local () 글꼴을 참조 할 수 있습니다. (다른 글꼴, 같은 이름의 일반 게시물) 최소한 위험은 있지만 브라우저 및 호스트 시스템 모두에 대한 유형 제어를 요구하고 있습니다. 이 위험은 글꼴 다운로드를 피하는 이점이 없습니다.

이것들은 모두 매우 중요한 문제이지만 고려할 가치가 있습니다.

답변

local (☺︎)은 IE6-8이 사용할 수없는 글꼴을 다운로드하지 못하게하는 CSS 해킹입니다 (EOT 형식의 글꼴 만 사용할 수 있음).

설명 : CSS 캐스케이드에서 마지막 src 속성이 우선합니다. 즉, CSS가 아래에서 위로 구문 분석됩니다. 로컬 (☺︎)은 IE가 사용할 수없는 글꼴을 대역폭 다운로드하지 않고 맨 아래의 src를 건너 뛰게하고 사용할 글꼴 .eot(위의 줄에 정의 되어 있음)의 글꼴로 바로 이동 합니다. 스마일리는 단지 그 이름을 가진 로컬 폰트 (문자 조합)가 없도록하는 것입니다.

자세한 내용은 여기를 참조하십시오 : http://nicewebtype.com/notes/2009/10/30/how-to-use-css-font-face/

답변

@ font-face CSS 캐스케이드에서 마지막 src 속성이 우선합니다. 즉, CSS가 아래에서 위로 구문 분석됩니다.

답변