ATOZ CSS Screencast : 유니 코드 범위 및 @font-face

키 포인트 요약

CSS의 규칙은 웹 디자인에서 사용자 정의 글꼴을 사용하여 성능을 향상시키고 타이포그래피를 향상시킬 수 있습니다. 다른 운영 체제 및 브라우저에서 이러한 사용자 정의 글꼴을 테스트하여 올바르게 나타나는지 확인하십시오.

CSS의

속성은 적용 할 맞춤형 글꼴의 문자 범위를 제한하는 데 사용될 수 있습니다. 이것은 특히 태그에 특수 문자 또는 기호를 추가하거나 특정 문자에 대한 특수 글꼴을 사용하는 데 특히 유용합니다.
• 속성을 ​​사용하면 필요한 문자 만 다운로드 및 사용되도록하여 웹 페이지 성능을 향상시켜로드해야 할 데이터의 양이 줄어 듭니다. 그러나 모든 브라우저 가이 속성을 지원하는 것은 아니므로 CSS 코드에 대체 글꼴을 제공해야합니다. @font-face
비디오 설명 (텍스트 초안에서 발췌)
• unicode-range
  이전 섹션에서는 다양한 텍스트 스타일 속성을 배웠습니다.
최신 브라우저 (및 IE4 이상)에서는 웹 사이트의 디자인을 향상시키기 위해 Custom
• Fonts를 추가 할 수 있습니다. unicode-range 우리는 이러한 사용자 정의 글꼴의 다양한 기능을 사용하여 성능을 향상시키고 전반적으로 타이포그래피를 개선 할 수 있습니다.
우리는이 섹션을 배울 것입니다 :

규칙에 대한 자세한 설명 타이포그래피를 제어하기 위해 글꼴 스택을 사용하고 를 사용하는 방법

과거에는 웹 페이지의 글꼴 선택이 다음과 같은 소수의 "네트워크 보안"글꼴로 제한되었습니다. arial 코믹 산 Courier New

조지아

충격 palatino 타하마 Times New Roman

trebuchet Verdana

이 글꼴 중 일부는 우수하며 웹 페이지에 적합합니다. 조지아는 세리프 글꼴, Arial 또는 Verdana는 훌륭한 글꼴입니다. 만화 산스는 확실히 최고가 아닙니다 ...

그러나 이제 우리는 다양한 사용자 정의 글꼴을 사용하여 를 사용하여 모든 브라우저에 표시 할 수 있습니다.
• 우리는이 작업을 수행 할 수 있지만, 다양한 운영 체제 및 브라우저에서 사용자 지정 글꼴을 테스트하여 예상대로 보이는지 확인하는 것이 좋습니다. @font-face 또한 글꼴 파일의 크기가 상당히 클 수 있으므로 성능 문제를 피하기 위해 현명하게 사용하십시오.
• 의 구문은 다음과 같습니다 unicode-range fonts는 속성을 ​​사용하여 이름을 지정 한 다음 다른 브라우저에 대한 다양한 파일 유형과 형식을 제공합니다.
사용자가 시스템에서 기존 글꼴을 다운로드하지 않도록하려면 을 검색 할 글꼴의 로컬 이름을 지정할 수 있습니다.

다른 브라우저에 대한 올바른 글꼴 형식을 모두 만들기 위해 Font Squirrel이라는 훌륭한 온라인 리소스를 사용했습니다.

그들은 매우 잘 작동하는 웹 글꼴 생성기를 가지고 있습니다. 그들이 제공하는 다운로드에는 CSS에 이러한 사용자 정의 글꼴을 추가하기위한 모든 코드 스 니펫도 포함되어 있으며, 이는 또한 편리합니다!

unicode-range 글꼴의 각 문자는 유니 코드 번호로 다음과 같이 설명 할 수 있습니다. "Atoz CSS"문자열은 다음과 같이 유니 코드로 표시 될 수 있습니다.

공간을 포함한 각 문자에는 고유 한 유니 코드 번호가 있습니다. UTF-8 문자 세트에는 일련의 특수 문자가 포함되어 있으며, 마크 업에 직접 모양과 기호를 추가하는 데 유용합니다.

로 사용자 정의 글꼴을 추가 할 때 우리는 그들이 적용하는 문자의 범위를 제한 할 수 있습니다. 언뜻보기에는 약간 이상하지만 설명해 주시기 바랍니다.

<code class="language-css">@font-face {
  font-family: 'Baskerville';
  src: url('baskerville.eot?#iefix') format('embedded-opentype'); 
  url('baskerville.woff') format('woff'); 
  url('baskerville.ttf') format('truetype');
  url('baskerville.svg#Baskerville') format('svg');
}</code>

Baskerville 글꼴의 이탤릭체는 매우 아름답고 많은 디자이너가 Baskerville 글꼴의 나머지 부분을 사용하지 않더라도 사용하기를 좋아합니다.

앰퍼 랜드에만이 특수 글꼴을 사용하는 한 가지 방법은 태그로 래핑하고 다른

를 설정하는 것입니다. 그러나 이것은 약간 번거 롭고 추가 표시없이 완전히 수행 할 수 있습니다.

<code>U+0041</code>

우리는이 문자 만 포함 된 글꼴을 만들어 목록의 첫 번째 글꼴로 글꼴 스택에 추가 할 수 있습니다.

브라우저가 글꼴에 존재하지 않는 문자가 발생하면 필요한 문자가 포함 된 글꼴이 발견 될 때까지 스택을 아래로 스캔합니다. 사용자 정의 또는 네트워크 보안 글꼴을 사용할 때 특별한 암페어 샌드를 추가하기 위해이 동작을 활용할 수 있습니다.

먼저, 우리는 단일 문자 글꼴을로드하기 위해

규칙을 만듭니다. 나는 그것을 "앰퍼 샌드"로 지정하고 로컬 글꼴 파일 소스를 사용하여 대역폭을 저장하겠습니다. @font-face i 단일 암페어 및 문자에 대해

를 u 0026으로 지정합니다. 속성 이름에서 알 수 있듯이 전체 문자 범위를 지정할 수 있지만이 경우 하나의 문자 만 필요합니다.

이 예제 HTML 파일에는 일련의 제목과 단락이 있으며, 여기에는 여러 가지 기호가 포함되어 있습니다.

나는 제목과 몸에 하나씩 두 개의 다른 글꼴 스택을 만들 것입니다. 각각의 경우, 스택의 첫 번째 글꼴은 사용자 정의 "암페어 및"글꼴입니다. <span></span> 타이틀의 경우 Museo 또는 Rockwell 또는 Serif 글꼴을 대체 글꼴로 추가합니다. font-family 신체의 경우 Avenir, Arial 또는 Sans-Serif를 대체 글꼴로 추가합니다.

<.> 그게 다야. 브라우저가 텍스트를 렌더링하면 스택의 첫 번째 글꼴에는 하나의 암페어 및 문자 만 포함되므로 나머지 문자가 목록에서 다음 글꼴을 사용하여 렌더링합니다 (찾은 경우).

의 브라우저 지원이 좋습니다. 모든 최신 브라우저 (Firefox 제외)와 IE9 이상에서 지원됩니다. 이것은 순전히 시각적 인 향상이기 때문에 브라우저 지원은 나에게 큰 문제가되지 않습니다. 지원되지 않은 브라우저는 스택에서 첫 번째 글꼴 만 성공적으로로드 할 수 있습니다.

(후속 FAQ 부분은 의사 원리 목표와 일치하지 않고 너무 길기 때문에 생략되었습니다. 핵심 내용은 위의 부분에 반영되었습니다.) .

위 내용은 ATOZ CSS Screencast : 유니 코드 범위 및 @font-face의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!