CSS 웹 폰트 웹 글꼴

글꼴

1. CSS 글꼴 가족

CSS에서 글꼴을 지정하려면 글꼴 - 가족 속성을 사용할 수 있습니다, 렌더링 시간을 텍스트 브라우저는이 속성을 기준으로 요소에 적용됩니다. 이 속성이 지정되지 않았거나 지정된 글꼴이 클라이언트 컴퓨터에 존재하지 않을 경우, 브라우저는 기본 글꼴을 사용합니다.

    <style>
        .line {
            font-family: 'Courier New', Courier, monospace;
        }
    </style>
    <p>Hello World!</p>

당신은 글꼴 - 가족을 설정하지 않으면 브라우저는 요소에서 사용되는 기본 글꼴을 사용합니다.
글꼴 - 가족 속성은 글꼴을 지정하는 경우,하지, 로컬 컴퓨터에 기본 글꼴을 사용합니다
글꼴 이름에 공백이있는 경우에는 인용 부호를 사용해야합니다.
폰트 콤마 복수의 분리 - 폰트를 지정하는 폰트 패밀리 속성들은 폰트는리스트 세트를 지정
당신은 글꼴 목록의 집합을 지정하는 경우, 그것은 첫 번째 글꼴을 찾기 위해 켜집니다 로컬로, 다음 두 번째를 사용할 수 없습니다. 글꼴 지정된 글꼴 목록이 아닌 로컬 컴퓨터, 브라우저가 사용하는 경우 기본 글꼴은 요소에 적용

2. 웹 안전 글꼴 (웹에 적합한 글꼴)

이 시스템은 일반적으로 사용 가능한 글꼴의 특정 숫자, 당신은 반드시 다른 시스템에서 사용할 수, 윈도우 글꼴을 사용할 수 있도록 다른 시스템 글꼴은 동일하지 않을 수 있습니다.

개발자는 제대로 표시 할 수 있도록이 컴퓨터에 설치되어있는 글꼴 지정했습니다. 그러나 클라이언트 시스템과 전체 글꼴 클라이언트는 기본 글꼴을 사용, 설치되어 있지 않습니다. 개발자가 어떤 글꼴 것을 고려 그래서 고객 기반이 설치됩니다.

일부 글꼴은 일반적인 시스템 (윈도우, 맥, 일반적인 리눅스 배포판, Android 및 iOS 버전)에서 사용할 수 있습니다, 이러한 글꼴은 안전 글꼴입니다.
특정 참조 :
https://developer.mozilla.org/en-US/docs/Learn/CSS/Styling_text/Fundamentals#Web_safe_fonts

3. 웹 글꼴 (웹 글꼴)

CSS 웹 폰트는 지정된 글꼴 파일이 로컬로 다운로드 할 수있는 기능입니다.

이 글꼴이 설치되어있는 경우 로컬 글꼴로 제한하고, 대부분의 브라우저는 웹 폰트를 지원하지 않는, 그래서 이것은 매우 효과적인 방법입니다.

웹 글꼴을 사용 :

1 개 SETP 다운로드 웹 폰트, CSS에서 사용하는 @font-face키워드 웹 글꼴 다운로드, 두 필요한 특성이있다
- src 글꼴 자원을 지정,
- font-family 사용자 정의 이름입니다.
```
  @font-face {
      font-family: "myFont";
      src: url("myFont.ttf");
  }
```
2 SETP 설정, 글꼴 font-family특성, 이번에 font-family글꼴 대신 글꼴 시스템의 네트워크 이름을 설정. (폰트 네트워크 이름은 이전 단계에서 정의되었다.)
```
  .line {
    font-family: 'myFont;
  }
```

3.1. 웹 글꼴에 대한

웹 글꼴 기술로서, 처음부터 IE (4) 지원.
당신이 좋은 크로스 브라우저 지원을받을 글꼴 다양한 형식을 필요로하므로 브라우저는 다른 글꼴 형식을 지원합니다.
대부분의 브라우저는 WOFF / WOFF2 지원 (웹 오픈 폰트 포맷 버전 1과 2, 웹 오픈 폰트 포맷은 버전 1과 2), 그것은 가장 효과적인 형식이지만, IE 지원의 이전 버전 만 EOT (임베디드 오픈 타입이 포함 된 것으로 보인다 SVG 글꼴 지원 버전 아이폰과 안드로이드 브라우저의 이전 버전을 포함 할 필요가 있고, 개방형) 글꼴을 입력합니다.
글꼴은 일반적으로 무료로 사용할 수 없습니다. 그들을 위해 지불, 또는 (귀하의 사이트 또는에서) 코드와 같은 다른 허가 조건을 준수해야하는 글꼴 제작자를 제공합니다. 당신은 허가없이 글꼴을 훔칠 수 없다.

3.2. 글꼴 형식

TureType (.TTF) 형식

글꼴 .TTF는 지원이 글꼴 브라우저 ID9 +, Firefox3.5 +, Chrome4 +, Safari3 +, Opera10 +, iOS 모바일, Safari4.2 +를 가지고있는 RAW 형식은 가장 일반적인 Windows 및 Mac 글꼴입니다
오픈 타입 (.OTF) 형식

.OTF 글꼴이 브라우저는 파이어 폭스 3.5 +, Chrome4.0 +, Safari3.1 +, Opera10.0 +, iOS 모바일있는이 글꼴을 지원 TureType에 근거하여 구축 된 원래 글꼴 형식으로 간주됩니다 , Safari4.2 +
웹 오픈 폰트 포맷 (.woff) 형식

.woff 폰트는 오픈 트루 / 오픈 타입의 압축 된 버전 폰트 최고의 웹 형식이다, 또한 브라우저 IE9 +, Firefox3.5 +, + Chrome6, Safari3의 폰트를 지원하기 위해 별도의 메타 데이터 패키지를 지원 0.6 +, Opera11.1 +
임베디드 오픈 타입 (.eot) 형식

IE .eot 글꼴은 트루에서이 형식의 글꼴을 만들이 글꼴 브라우저 IE4 +를 지원, 특수 글꼴입니다
SVG (.svg) 형식

.svg 폰트 포맷 SVG 폰트와 폰트 렌더링 지원이 브라우저에 기초 Chrome4 +, + Safari3.1, Opera10.0 +, iOS 모바일 Safari3.2 +는 보유

다른 브라우저는 서로 다른 형식을 지원, 브라우저의 이전 버전의 일부는, 그들은 단지 글꼴 형식의 이전 버전을 지원합니다. 예를 들어, 대부분의 최신 브라우저는 WOFF / WOFF2 (웹 오픈 폰트 포맷 버전 1과 2, 웹 오픈 폰트 포맷 버전 1과 2)는 가장 효과적인 형식 지원하지만, IE 지원에만 EOT (임베디드 오픈 타입의 이전 버전 임베디드 오픈 타입) 글꼴, 당신은 아이폰과 안드로이드 브라우저의 이전 버전을 SVG 글꼴 지원 버전을 포함해야

우리가 일반적으로 넣어 그래서 여러 글꼴은 더 나은 호환성을 얻을 수 있도록, 자신이 선택한 브라우저를 허용 할 수 있습니다.

글꼴 그들이 지불해야했다, 또는 어떤 조건을 따라, 일반적으로 무료로 사용할 수 없습니다. 당신은 허가없이 글꼴을 훔칠 수 없다.

3.3 문 글꼴 @ 글꼴 얼굴

@font-face {
    font-family: 'myFont';
    font-display: swap;
    src: url('webfont.eot'); /* IE9 */
    src: url('webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
    url('webfont.woff2') format('woff2'),
    url('webfont.woff') format('woff'), /* chrome、firefox */
    url('webfont.ttf') format('truetype'), /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/
    url('webfont.svg#webfont') format('svg'); /* iOS 4.1- */
}

font-family 단지 같은 내장 글꼴 "굴림", "마이크로 소프트 우아한 검은", "콘솔"과 같은 글꼴 이름을 정의합니다.

src 두 부분이 있습니다 :

수입 (다운로드) 글꼴 파일의 경로를 지정 : URL을
형식 : 글꼴 파일 형식 사양, 글꼴을 찾을 수있는 브라우저가 더 빠르게 사용할 수 있습니다, 선택.

src 쉼표로 구분하여 여러 개의 선언을 나열 할 수 있습니다.

브라우저 선언 순서에서 사용할 수있는 글꼴, 그래서 전면에 가장 적합한 형식, 뒷면에 상대적으로 긴 형식을 찾을 수 있습니다. 전면 예 WOFF2 일반 들어 TTF 마지막 두었다.

eot글꼴 및 IE는 예외는 eot, 그래서 두 가지가있을 것입니다 IE는 형식 문을 지원하지 않는 IE와 IE9을 지원 만든 형식 src특정 하나의 문, eot및 IE9의

http://www.w3help.org/zh-cn/causes/RF1001

https://www.w3.org/Submission/EOT/

웹 폰트를 가져 오기 4.

글꼴 글꼴 서비스 제공 업체, 수수료에 대한 몇 가지, 몇 가지 무료의 전화 번호를 통해 얻을 수 있습니다.

4.1. 글꼴을 얻으려면, 인터넷 iconfont를 사용

이 글꼴을 제공하는 많은 웹 사이트도 있지만, 알리와 일반적으로 IconFont , 홈 페이지의 상단에있는 메뉴 표시 줄을 선택 글꼴 온라인

단계 1 가기 텍스트 입력 상자와 같은 텍스트 폰트를 적용하려면

我是一个任性的孩子，我希望，每一个时刻都象彩色蜡笔那样美丽。

(문장의이 행은 30 자 총 입력)

2 단계는 적용 할 서식 글꼴을 추가합니다.

3 단계 다운로드 및 텍스트를 추출,

당신이 필요로하는 응용 프로그램의 표시 글꼴 텍스트 상자에 로컬 다운로드를 선택, 다운로드 압축을 풀고, 압축 파일을 얻을, 당신은 글꼴 파일을 얻을.

알리가 제공하는 온라인 참조를 하고 로컬에 다운로드 참조 두 종류의, 그러나 여기에서 우리가 다운로드 할 수있는 옵션을 가지고 로컬 테스트는 온라인 참조를 사용할 수 없습니다. @@@ 공식 공식을 참조하여 상세하게 설명 하여 webfont 원위 도움 질의 응답 A.에서 세번째

이러한 형식 .TTF .woff .woff2에 .svg 파일이 .eot 것을 볼 당신의 포장을 벗긴 후이 글꼴 파일입니다.

4.2. 간단한 글꼴 파일을 이해하기

이 파일은 제외하고, 직접 볼 수없는, 기본적으로 깨진 직접 열립니다 .svg우리가 직접 열 수 있습니다.

여 .svg우리는 두 가지 중요한 것들을 볼 수 있습니다 :

(26 개)의 총 내부 <glyph>요소
각 요소는이 unicode속성을

상기 먼저 살펴 unicode특성 :

이 unicode속성은 문자로 표현되는 unicode코드, 우리는 단지 아래의 텍스트와 볼, 일부 유입 텍스트를 촬영 한 unicode코딩 제어 :

我       是      一      个       任      性      的       孩      子       ，
&#25105;&#26159;&#19968;&#20010;&#20219;&#24615;&#30340;&#23401;&#23376;&#65292;
&#x6211;&#x662f;&#x4e00;&#x4e2a;&#x4efb;&#x6027;&#x7684;&#x5b69;&#x5b50;&#xff0c;

(텍스트의 첫 번째 행은 제 2 라인은 대응하는 기지국 (10 개)이고 unicode16 진수 코드로, 세 번째 행에 대응한다 unicode코드)

.svg문서 unicode진수 사용 unicode코드, 상기 진수되도록 unicode부호화가 .svg발견 될 수있는 각각의 룩업 파일. 그리고 자세히 살펴보면 <glyph>에 따라 정렬하려면 unicode코딩의 정렬 순서. 따라서, 각각의 <glyph>문자에 대응 unicode하고, 디스플레이 (특성 D).

에서 살펴 보자 <glyph>요소 :

각 <glyph>텍스트에 해당하는 unicode표시 (속성 D), 그러나 여기에만 총 26 <glyph>, 우리는 30 개 단어의 총을 가지고, 왜에만 26 <glyph>그것의?

우리가 입력 한 30 자이 세 단어가 반복 포함되어 있기 때문에 "I", "A", ","(쉼표). 알리 iconfont는 우리가이 26 텍스트 입력을 생성주고, 기반으로하므로, 텍스트 (26)의 총 반복하지 unicode코딩 서열의 종류. 그래서 여기에 우리가이 다운로드 글꼴 만 26 문자주의를 기울여야한다, 다른 문자는이 글꼴이 없습니다.

또한 3의 글꼴을 사용하는 단계를 설명하는 .html 파일,있다.

4.3. 선언 폰트

사실, .html 파일이 설명이 사용, 당신은 작업을 수행 할 수 있습니다.

    <style>
        /* 第一步：使用font-face声明字体 */
        @font-face {
            font-family: 'hello-web-font';
            font-display: swap;
            src: url('webfont.eot');
            /* IE9 */
            src: url('webfont.eot?#iefix') format('embedded-opentype'),
                /* IE6-IE8 */
                url('webfont.woff2') format('woff2'),
                url('webfont.woff') format('woff'),
                /* chrome、firefox */
                url('webfont.ttf') format('truetype'),
                /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/
                url('webfont.svg#webfont') format('svg');
            /* iOS 4.1- */
        }
        /* Step 2, 定义使用 webfont 的样式 */
        .my-web-font {
            font-family: "hello-web-font" !important;
            font-size: 16px;
            font-style: normal;
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;
        }
    </style>
    <!-- Step 3. 为文字加上对应的样式 -->
    <p class="my-web-font">我是一个任性的孩子，我希望，每一个时刻都象彩色蜡笔那样美丽。</p>
    <p class="my-web-font">我希望，能在心爱的白纸上画画，画出笨拙的自由</p>

위의 예에서, 특별히 라인 더, 다음 결과를 보면 지불 :

나는 변덕스러운 아이였다, 나는 희망 크레용 아름다운로 매 순간.

나는 희망을 사랑 할 수 , 흰 종이에 그림을 서투른 그릴 의 자유를

이 효과의 결과는 거의, 왜 어떤 글꼴이 변경되었습니다 있으며, 일부 참으로 기본 글꼴을 사용하는 전술?

그 26 자, 우리는 우리 세대 글꼴을 생성하기 때문에, 우리 세대는 콘텐츠의 첫 번째 라인은 모두의 첫 번째 줄 변화 때문에 글꼴이고, 텍스트 글꼴의 몇 번째 줄이 파일에 포함 된 것을 ( unicode인코딩) , 해당 폰트를 달성 할 것이다.

5. 글꼴 아이콘

기본 글꼴, 비발디 글꼴, Wingdings를 글꼴 : 다른 글꼴에서 먼저 보면, 여기, 즉 세 가지 글꼴입니다.

(세 가지 기본 글꼴은 이미 윈도우 글꼴을 설치)

<span>ABC123</span>
<span style="font-family:vivaldi">ABC123</span>
<span style="font-family:Wingdings">ABC123</span>

다음으로 상기 코드의 출력은 :

ABC123

첫 번째 줄은 기본 글꼴입니다.

문서를 처리 할 때 우리는 종종 아름다운 글꼴의 다양한 사용하기 때문에 글꼴의 두 번째 라인은 매우 아름답고, 또한 잘 이해합니다.

세 번째는 세 번째 줄은 "ABC123", 더 놀라운 일이지만, 자신의 표시 글꼴이 "특별한"문자가되었다, 아이콘 좋아하지만, 기본적으로 그가 문자, 텍스트 등 사용자의 느낌, 일부 코딩.

글꼴 아이콘이 텍스트입니다 그래서, 글꼴 "아이콘"이라고 때문에 당신은, "같은"텍스트 보이는 폰트를 적용한 후에는 "아이콘."

5.1. 글꼴 아이콘을 적용

사이트에 항상 같은 메뉴 바 등 다양한 작은 아이콘으로 돌아갑니다 같은 뒤로 버튼과 아이콘, 대표가 - 아이콘 악당 일반 사용자 정보 사용자가, 쇼핑 카트 쇼핑 카트 아이콘이 있습니다.

작은 아이콘은 이전에 스프라이트로 치료, 스프라이트 과정은 세 가지 단점이있다

쓰기 스타일
스프라이트는 작은 그림은, 줌은 왜곡된다
스프라이트는 사진입니다, 색상은 수정할 수 없습니다

CSS에서는 스프라이트 아이콘 다른 글꼴을 사용하고, 많은 장점을 가지고 있습니다 :

모든 요청을 줄이고, 아이콘 폰트 라이브러리에 패키지 (글꼴 포장되어, 다운로드 한 번 액세스 웹 페이지)
왜곡없는 속성 벡터, 증폭을 갖는 임의의 줌 선명도를 보장
유연한, 쉽게 (그는 캐릭터이기 때문에, 그래서 색상, 스타일, 크기 등을 수정할 수 등등; 응용 프로그램 글꼴 글꼴 스타일 및 사진을 수정하는 것보다 더 유연) 유지

5.2. iconfont를 사용하여 인터넷을 통해 글꼴 아이콘을 얻으려면

즉, 텍스트, 아이콘이기 때문에 글꼴 자연의 글꼴 아이콘에 어떤 구별없이 웹 폰트를 생성 생성합니다. 에서 iconfont 도서관 홈 페이지 위의 아이콘 메뉴 모음을 찾아 - 공식 아이콘 라이브러리를

차트 라이브러리에서 원하는 아이콘을 검색 한 다음 쇼핑 카트에있는 아이콘을 저장하기 위해 "쇼핑 카트"를 선택 아이콘에 마우스를 이동합니다.

아이콘을 완료하기 위해 추가 한 후, 쇼핑 카트의 오른쪽 상단 모서리를 선택하고 장바구니의 프로젝트에 추가를 선택합니다. (당신이 프로젝트 항목을 추가하지 않은 경우)

그런 다음 프로젝트 페이지를 입력, 프로젝트 페이지는 "현지에 다운로드"를 선택

폴더를 열고 네트워크는 동일한 글꼴, 글꼴 파일을 찾을 것이며, 더 demo.html 이상이있을 것이다. 내부의 상세한 동작은이 demo.html.

다음에, 우리는 (은 USING 같은 폰트 및 네트워크를 사용하여 unicode, 폰트)

1 단계 문 글꼴 사용@font-face

2 단계 사용자 정의 스타일

3 단계 응용 프로그램 스타일 참고 : 특정을 지정하려면이 섹션 필요 unicode코딩

에 아이콘 폰트를 사용하려면 3 단계 약간 다른 모습을 - 당신이 당신의 자신 지정할 필요가 unicode글꼴의 텍스트 안에, 나는 또한 우리가 우리 세대를 다운로드 할 것을 강조하기 때문에, 코드가 있지만, 사실은 텍스트 및 글꼴과 같은 (폰트 아이콘이 텍스트의 글꼴입니다) 텍스트 글꼴 파일에 글꼴의 응용 프로그램이 아닌 경우 텍스트, 다음 텍스트가 변경되지 않습니다, 그것은 기본 글꼴을 사용합니다. 의 글꼴 아이콘 그래서 3 단계 - 당신의 자신의 지정 unicode이 필요하므로, 글꼴 아이콘 단지 우리가 지정된 아이콘 (텍스트)를 사용하는 것입니다있는 시간을 사용, 텍스트 및 글꼴처럼, 사실, 코드를 사용할 아이콘, 여기에있을 것입니다 대응하여 unicode부호화한다.

텍스트 및 글꼴 및 demo.html 종처럼 처음 두 단계는 상세하게 설명되어 있지만, 3 단계 대응의 사용에주의를 기울여야한다 unicode내가 사용하는 아이콘 같은 쇼핑 카트로, 코딩 unicode입니다 코드 :

<span class="hello-icon-font">&#xe63c;</span>

5.3. 결합 의사 소자를 사용

unicode HTML 내부에 표시 코딩, 직관적이지, 코드에서 보면, 그것은 카트 "아이콘"을 의미하는 알 수없는 경우

<span class="my-icon-font">&#xe63c;</span>

사용 CSS 의사 요소는 텍스트 (추가 unicode코딩) 및 CSS 스타일의 이름이 더 직관적주고, 좋은 아이디어입니다.

예를 들면 :

2 단계 글꼴 스타일 아이콘을 정의

.my-icon-font{
    font-family: hello-icon-font;
}

3 단계 은 "아이콘"카트를 나타 내기 때문에 매우 직관적이다 "장바구니"라는 스타일 이름을 정의하는, 의사 요소를 사용하여.

.cart::before{
    content: "\e641"; /* &#xe641 */
}

이 글꼴이기 때문에, 당신은 (에 스타일을 쓰기 전에 글꼴 속성을 변경할 수 2 단계 에서)

.cart::before{
    content: "\e641"; /* &#xe641 */
    color: red;
    font-size: 50px;
}

4 단계 의 원래 인 단계 (3) , 요소 스타일을 적용

<span class="my-icon-font cart"></span>

참조 :

https://developer.mozilla.org/en-US/docs/Learn/CSS/Styling_text/Web_fonts