11.Nas_1


새창 작성 수정 목록 링크 Edit G카랜다 HDD HDD HDD 게시물 주소 복사


펌정보)웹폰트 적용에서 최적화까지

♨ 카랜더 일정 :
  • 링크

  • 첨부

  • 컨텐츠 정보

    본문

    펌정보)웹폰트 적용에서 최적화까지


    unicode-range 속성Permalink

    unicode-range 속성을 이용하면 특정 문자열만 웹폰트로 지정할 수 있다. 웹 페이지에 지정된 범위의 문자열이 없으면 웹폰트를 다운로드 하지 않는다. 다국어를 지원하는 웹사이트일 경우 현재 선택된 언어에 따라 각각의 언어만 지원하는 웹폰트를 다운로드 할 수 있다.

    @font-face {
      font-family: 'foo font';
      font-weight: 400;
      src: local('foo font'),
        url(woff2-foo-font-ko-path) format('woff2'),
        url(woff-foo-font-ko-path) format('woff'),
      unicode-range: U+1100-U+11FF; //한글만 다운로드
    }
    
    @font-face {
      font-family: 'foo font';
      font-weight: 400;
      src: local('foo font'),
        url(woff2-foo-font-path) format('woff2'),
        url(woff-foo-font-path) format('woff'),
      unicode-range: U+000-5FF; //라틴어만 다운로드
    }
    

    구글 폰트에서 제공하는 웹폰트 CSS 파일을 보면, 아래와 같이 uincode-range가 쓰인 것을 확인할 수 있다. 이는 머신 러닝을 토대로 웹 페이지의 주제에 따라 사용되는 패턴을 발견하고, 그 패턴에 따라 한글을 나눠서 실제 사용되는 문자만 다운로드 할 수 있게 해준다.

    /* [0] */
    @font-face {
      font-family: 'Noto Sans KR';
      font-style: normal;
      font-weight: 400;
      font-display: swap;
      src: local('Noto Sans KR Regular'), local('NotoSansKR-Regular'), url(https://fonts.gstatic.com/s/notosanskr/v11/PbykFmXiEBPT4ITbgNA5Cgm203Tq4JJWq209pU0DPdWuqxJFA4GNDCBYtw.0.woff2) format('woff2');
      unicode-range: U+f9ca-fa0b, U+ff03-ff05, U+ff07, U+ff0a-ff0b, U+ff0d-ff19, U+ff1b, U+ff1d, U+ff20-ff5b, U+ff5d, U+ffe0-ffe3, U+ffe5-ffe6;
    }
    
    /* [2] */
    @font-face {
      font-family: 'Noto Sans KR';
      font-style: normal;
      font-weight: 400;
      font-display: swap;
      src: local('Noto Sans KR Regular'), local('NotoSansKR-Regular'), url(https://fonts.gstatic.com/s/notosanskr/v11/PbykFmXiEBPT4ITbgNA5Cgm203Tq4JJWq209pU0DPdWuqxJFA4GNDCBYtw.2.woff2) format('woff2');
      unicode-range: U+d723-d728, U+d72a-d733, U+d735-d748, U+d74a-d74f, U+d752-d753, U+d755-d757, U+d75a-d75f, U+d762-d764, U+d766-d768, U+d76a-d76b, U+d76d-d76f, U+d771-d787, U+d789-d78b, U+d78d-d78f, U+d791-d797, U+d79a, U+d79c, U+d79e-d7a3, U+f900-f909, U+f90b-f92e;
    }
    

    덕분에 웹폰트 전체 용량보다 작은 리소스만 다운로드 하게 된다. 아래는 Noto Sans KR 파일을 여러개로 분리해 다운로드 받은 모습이다.

    구글 웹폰트 로딩 화면, 한 개의 폰트가 여러개로 분리되어 있다.

    마무리Permalink

    다른 글꼴 형식

    트루 타입 글꼴 (TTF)

    TrueType은 Apple과 Microsoft에서 1980 년대 후반에 개발 한 글꼴 표준입니다. TrueType은 Mac OS 및 Microsoft Windows 운영 체제 모두에서 가장 일반적인 글꼴 형식입니다.

    OpenType 글꼴 (OTF)

    OpenType은 확장 가능한 컴퓨터 글꼴의 형식입니다. TrueType을 기반으로 제작되었으며 Microsoft의 등록 상표입니다. OpenType 글꼴은 오늘날 주요 컴퓨터 플랫폼에서 일반적으로 사용됩니다.

    웹 오픈 글꼴 형식 (WOFF)

    WOFF는 웹 페이지에서 사용하기위한 글꼴 형식입니다. 2009 년에 개발되었으며 현재는 W3C 권장 사항입니다. WOFF는 기본적으로 압축 및 추가 메타 데이터가있는 OpenType 또는 TrueType입니다. 목표는 대역폭 제약이있는 네트워크를 통해 서버에서 클라이언트로 글꼴 배포를 지원하는 것입니다.

    웹 오픈 글꼴 형식 (WOFF 2.0)

    WOFF 1.0보다 더 나은 압축을 제공하는 TrueType / OpenType 글꼴입니다.

    SVG 글꼴 / 모양

    SVG 글꼴을 사용하면 텍스트를 표시 할 때 SVG를 글리프로 사용할 수 있습니다. SVG 1.1 사양은 SVG 문서 내에서 글꼴을 만들 수있는 글꼴 모듈을 정의합니다. SVG 문서에 CSS를 적용 할 수도 있고 SVG 문서의 텍스트에 @ font-face 규칙을 적용 할 수도 있습니다.

    EOT (Embedded OpenType 글꼴)

    EOT 글꼴은 웹 페이지에 포함 된 글꼴로 사용하기 위해 Microsoft에서 디자인 한 압축 형식의 OpenType 글꼴입니다.

    ■ ▶ ☞ 정보찾아 공유 드리며 출처는 링크 참조 바랍니다 ♠ . ☞ 본자료는 https://11q.kr 에 등록 된 자료 입니다♠.

    [ 추가 정보 ... 더보기) ]
    뷰PDF 1,2



    office view

    관련자료

    댓글목록

    profile_image

    11qkr님의 댓글

    11qkr 쪽지보내기 메일보내기 홈페이지 자기소개 아이디로 검색 전체게시물 아이피 (192.♡.0.1) 작성일

    웹폰트 및 웹에디터
    <a role="button" href="https://11q.kr/www/summernote.html" target="_blank" class="btn btn-blue btn-sm"><i class="fa fa-plus"></i><span class="hidden-xs"> 썸머노트 새창으로</a>
    Summernote_editor...SPL(input-1010)
    </a>

    profile_image

    11qkr님의 댓글

    11qkr 쪽지보내기 메일보내기 홈페이지 자기소개 아이디로 검색 전체게시물 아이피 (192.♡.0.1) 작성일

    <a role="button" href="https://11q.kr/www/summernote.html" target="_blank" class="btn btn-blue btn-sm"><i class="fa fa-plus"></i><span class="hidden-xs"> 썸머노트 새창으로</a>
    Summernote_editor...SPL(input-1010)
    </a>

    목록

    새창 작성 수정 목록 링크 Edit G카랜다 HDD HDD HDD 게시물 주소 복사




    Total 1,674 / 8 Page
    [ ● ESXi 7.0 Web Client 자동 로그아웃 끄기 ]

    ●ESXi 7.0 Web Client 자동 로그아웃 끄기 esxi 로그인 작업후 얼마의 시간 경과후 아무런 작업이 없어서 로그아웃되었습니다 ▶V…

    [ ● USB 장치를 ESxi서버 VM에 연결하는 방법 정보 ]

    ● USB 장치를 ESxi서버 VM에 연결하는 방법 정보 https://www.nakivo.com/blog/how-to-use-usb-devic…

    [ ● 정보 [20211205 업데이트] DSM7.0.1 온라인 컴파일(도움 없이 컴파일 3분), eSATA 마… ] 댓글 2

    ● 정보[20211205 업데이트] DSM7.0.1 온라인 컴파일(도움 없이 컴파일 3분), eSATA 마운트, 셧다운 및 기타 드라이버 추가,…

    [ ● 작업참조 정보)헤놀로지 RedPill tinyCore 만능부트로더 for Native img 적용 가이드 ] 댓글 8

    ● 작업준비)헤놀로지 RedPill tinyCore 만능부트로더 for Native img 적용 가이드슈퍼멤버 게시글 정보게시됨2021년 12월…

    [ ● DSM 설치과정이 비정상적으로 중단된경우 접속 해결하기 ] 댓글 1

    ● DSM 설치과정이 비정상적으로 중단된경우 접속 해결하기헤놀로지를 물리파워버튼으로 자꾸 종료하시면 HDD에 무리가 갈수 있으니,가급적 teln…

    [ 설치작업성공● speedtest - docker 설치 모니터링 설치방법 portainer stack 으… ] 댓글 2

    설치작업● speedtest - docker 설치 모니터링 설치방법 portainer stack 으로 설치 방법설치 방법 portainer로 접…

    [ ● Esxi 서버 부트로더 변환 작업이 필요 없는 img 파일 올리기 ] 댓글 1

    ● Esxi 서버 부트로더변환 작업이 필요 없는img 파일 올리기 저는 Esxi 서버에서 img을 그대로 사용합니다방법은vmdk 변환을 1회만 …

    [ ● MobaXterm terminal 로 사용 포트 확인하기 ]

    ● MobaXterm terminal 로 ip별 사용 포트 확인하기내부및 외부 모두 사용중인 ip별 port scan 가능합니다예) 내부로컬은 …

    [ ● 시놀로지작업)동영상 분석 테스트 letsencrypt 업데이트 및 자동 업 데이트 ] 댓글 1

    ● 시놀로지작업)동영상 분석 테스트 letsencrypt 업데이트 및 자동 업 데이트주) 1일 5회이상 발급 안됨,,,,에러 나옴 >>…

    [ ★★★ 무료ssl 인증서 시놀로지작업_재설치 검증성공 ) 무료ssl 인증서 자동생성 Nginx Proxy M… ] 댓글 5

    ★★★무료ssl 인증서시놀로지작업_재설치 검증성공 ) 무료ssl 인증서 자동생성 Nginx Proxy Manager 시놀로지 도커에 설치 작업 …

    [ ● 영상분석)도메인이란? 웹사이트에 나만의 도메인 등록하는 방법 (ft. HTTPS 평생 무료) ] 댓글 2

    ● 영상분석)나의도메인 관리>웹사이트에 나만의 도메인 등록하는 방법 (ft. HTTPS 평생 무료)기존사이트 사용중에 잠깐 / 연결 중단 …

    [ PHP - 간단한 사용자 인증 (로그인 창)컴퓨터/PHP ] 댓글 1

    ◎ 네이버에서 [https://11q.kr 홈피] 검색 찾아오세요 ◎\r\n2009/02/27 11:42\r\n\r\n<?$admin_us…

    [ 갤럭시 S 테그라크 커널 빌드 25 설치하기.../ 갤럭시 펌웨어/오딘 ]

    ♥\r\n갤럭시 S 테그라크 커널 빌드 25 설치하기...는 다음 원본 사이트를 참조 하였습니다http://news.danawa.com/neti…

    [ 로그인후 특정 계시판으로 이동 ]

    bbs/login_check.php 파일 중간정도에 보시면 아래 부분이 있습니다. if ($url) { $link = urldecode($url…

    [ dtd 1,51설치 샘플 ]

    .\r\n----------------------------------------------\r\nHomepc.11q.kr\r\n========…

    [ 홈페이지 메뉴명 찾아 변경 수정하기 / 파일내 문서내용의 문자열 동일 문자 파일찾기 total comman… ]

    홈페이지 메뉴명 찾아 변경 수정하기 / 파일내 문서내용의 문자열 동일 문자 파일찾기 total command이용\r\n\r\n\r\nShims …


    ♥간단_메모글♥


    최근글


    새댓글



    PHP 안에 HTML ☞ 홈페이지 화면갱신 시간은 ♨
    ▶ 2024-06-17 15:29:56

    오늘의 홈 현황


    • 현재 접속자♨ 319 명
    • 오늘 가입자※ 1 명
    • 어제 가입자※ 2 명
    • 주간 가입자※ 21 명
    • 오늘 방문자 1,410 명
    • 어제 방문자 1,853 명
    • 최대 방문자 13,042 명
    • 전체 방문자 4,383,050 명
    • 전체 게시물※ 8,640 개
    • 전체 댓글수※ 24,746 개
    • 전체 회원수 11,052 명

    QR코드


    ☞ QR코드 스캔은 kakao앱 자체 QR코드

    알림 0








    최신글↑