로컬 글꼴로 고급 서체 사용

Local Font Access API를 사용하여 사용자의 로컬에 설치된 글꼴에 액세스하고 글꼴에 관한 하위 수준의 세부정보를 가져오는 방법을 알아봅니다.

Thomas Steiner

웹에 안전한 글꼴

충분히 오랫동안 웹 개발을 해왔다면, 소위 말하는 웹 안전 글꼴을 사용합니다. 이러한 글꼴은 가장 많이 사용되는 운영 체제의 거의 모든 인스턴스에서 사용할 수 있는 것으로 알려져 있습니다. 바로 Windows, macOS, 가장 일반적인 Linux 배포판, Android, iOS입니다. 2000년대 초, 마이크로소프트는 이니셔티브 웹용 TrueType 핵심 글꼴이라고 하는 이 글꼴은 목표를 지정하는 "해당 웹 사이트를 방문할 때마다 지정된 페이지와 사이트 디자이너가 의도한 것'이라고 말합니다. 예, 이 포함된 사이트는 Comic Sans MS 다음은 웹 안전 글꼴 스택을 sans-serif 다음과 같이 표시될 수 있습니다.

body {
  font-family: Helvetica, Arial, sans-serif;
}

웹 글꼴

웹 보안 글꼴이 정말 중요한 시절은 이미 지났습니다. 지금은 웹 글꼴로, 이 중 일부는 가변 글꼴도 조정할 수 있습니다. 표시할 수 있습니다. 웹 글꼴을 사용하려면 CSS의 시작 부분에 @font-face 블록, - 다운로드할 글꼴 파일을 지정합니다.

@font-face {
  font-family: 'FlamboyantSansSerif';
  src: url('flamboyant.woff2');
}

이후에는 font-family(평소):

body {
  font-family: 'FlamboyantSansSerif';
}

지문 벡터로 사용되는 로컬 글꼴

대부분의 웹 글꼴은 웹에서 가져옵니다. 하지만 흥미로운 사실은 @font-face의 src 속성 선언을 통해 url() 함수에서 local() 함수를 사용하세요. 이렇게 하면 맞춤 글꼴을 로컬로 로드할 수 있습니다. 사용자에게 FlamboyantSansSerif의 경우 운영체제에 설치된 경우 파일 대신 로컬 사본을 사용합니다. 있습니다.

@font-face {
  font-family: 'FlamboyantSansSerif';
  src: local('FlamboyantSansSerif'), url('flamboyant.woff2');
}

이 접근 방식은 잠재적으로 대역폭을 절약하는 멋진 대체 메커니즘을 제공합니다. 인터넷에서, 안타깝지만 Google에 좋은 일이 있을 수 없습니다. local() 함수의 문제는 브라우저 디지털 지문 수집에 악용됩니다. 사용자가 설치한 글꼴 목록은 있습니다. 많은 회사가 직원들의 사무실에 설치된 회사 글꼴을 가지고 있습니다. 노트북 예를 들어 Google에는 Google Sans라는 회사 글꼴이 있습니다.

<ph type="x-smartling-placeholder">
</ph> Google Sans 글꼴의 미리보기를 보여주는 macOS Font Book 앱 <ph type="x-smartling-placeholder">
</ph> Google 직원의 노트북에 설치된 Google Sans 글꼴

공격자는 특정 회사가 어떤 회사에서 일하고 있는지 확인하여 Google Sans와 같은 알려진 많은 회사 글꼴 공격자는 블루베리 파이를 사용하여 서체를 측정할 수 있습니다. 글리프가 알고 있는 도형의 모양과 일치하면 공격자가 히트를 받았습니다. 글리프가 일치하지 않으면 공격자는 회사 글꼴이 설치되지 않아 기본 대체 글꼴이 사용되었습니다. 다음에 대한 자세한 내용은 다른 브라우저 디지털 지문 공격에 대해 자세히 알아보려면 설문조사 자료 라퍼딕스 외

회사 글꼴을 따로 두고, 설치된 글꼴 목록만 식별할 수 있습니다. 이러한 상황이 이러한 공격 경로가 너무 악화되어 최근에는 WebKit 팀이 결정함 "[사용 가능한 글꼴 목록에] 웹 글꼴과 운영체제에 함께 제공되는 글꼴만 로컬에 사용자가 설치한 글꼴이 아닌 다른 시스템'을 사용해야 합니다. (본 이메일은 Google Ads 계정의 로컬 글꼴로 변환)

로컬 글꼴 액세스 API

이 기사의 도입부로 인해 부정적인 기분이 들었을 수 있습니다. 우리가 정말 멋진 일을 무엇인가요? 걱정하지 마세요. 우리는 할 수 있고 모든 것이 희망이 아닙니다. 하지만 먼저 여러분이 궁금해하실 수 있는 질문에 대답해 보겠습니다.

웹 글꼴이 있는데 왜 Local Font Access API가 필요한가요?

전문가 수준의 디자인과 그래픽 도구를 제공하기가 어려웠습니다. 있습니다. 한 가지 걸림돌로는 다양한 사용 방법을 전문적으로 가 제공되고 힌트가 표시된 글꼴의 일종입니다. 웹 글꼴을 사용하면 일부 게시 기능이 사용할 수 있지만 애플리케이션이 사용하는 벡터 글리프 모양과 글꼴 테이블에 대한 래스터라이저를 사용하여 글리프 윤곽선을 렌더링할 수 있습니다. 마찬가지로 웹 글꼴의 바이너리에 액세스할 수 있는 방법도 없습니다. 데이터를 수집하는 데 사용됩니다

  • 디자인 도구가 자체 OpenType 레이아웃을 구현하려면 글꼴 바이트에 액세스해야 하며, 벡터 필터 또는 변환이 표시됩니다.
  • 개발자는 웹에 가져오는 애플리케이션에 대한 기존 글꼴 스택을 보유하고 있을 수 있습니다. 이러한 스택을 사용하려면 일반적으로 글꼴 데이터에 직접 액세스해야 하는데, 웹 글꼴은 제공합니다
  • 일부 글꼴은 웹을 통한 제공에 대한 라이선스가 부여되지 않을 수 있습니다. 예를 들어 Linotype은 데스크톱 사용만 포함하는 일부 글꼴

Local Font Access API는 이러한 문제를 해결하기 위한 시도입니다. 다음 두 부분으로 구성됩니다.

  • 글꼴 열거 API: 사용자가 사용 가능한 모든 시스템에 대한 액세스 권한을 부여할 수 있습니다. 있습니다.
  • 각 열거 결과에서 하위 수준 (바이트 지향) SFNT 컨테이너를 요청하는 기능 액세스를 할 수 있습니다.

브라우저 지원

브라우저 지원

  • Chrome: 103 <ph type="x-smartling-placeholder">
  • Edge: 103. <ph type="x-smartling-placeholder">
  • Firefox: 지원되지 않음 <ph type="x-smartling-placeholder">
  • Safari: 지원되지 않음 <ph type="x-smartling-placeholder">

소스

Local Font Access API 사용 방법

특성 감지

Local Font Access API가 지원되는지 확인하려면 다음을 사용합니다.

if ('queryLocalFonts' in window) {
  // The Local Font Access API is supported
}
드림

로컬 글꼴 열거

로컬에 설치된 글꼴 목록을 가져오려면 window.queryLocalFonts()를 호출해야 합니다. 이 처음 실행할 때 사용자가 승인하거나 거부할 수 있는 권한 메시지가 표시됩니다. 사용자가 로컬 글꼴이 쿼리되도록 승인하면 브라우저는 글꼴 데이터가 포함된 배열을 반환합니다. 몇 가지 있습니다. 각 글꼴은 family 속성이 있는 FontData 객체로 표시됩니다. (예: "Comic Sans MS"), fullName (예: "Comic Sans MS"), postscriptName( 예: "ComicSansMS") 및 style (예: "Regular")

// Query for all available fonts and log metadata.
try {
  const availableFonts = await window.queryLocalFonts();
  for (const fontData of availableFonts) {
    console.log(fontData.postscriptName);
    console.log(fontData.fullName);
    console.log(fontData.family);
    console.log(fontData.style);
  }
} catch (err) {
  console.error(err.name, err.message);
}

글꼴의 하위 집합에만 관심이 있는 경우 PostScript postscriptNames 매개변수를 추가하여 이름을 지정할 수 있습니다.

const availableFonts = await window.queryLocalFonts({
  postscriptNames: ['Verdana', 'Verdana-Bold', 'Verdana-Italic'],
});

SFNT 데이터 액세스

전체 SFNT 액세스는blob() FontData 객체. SFNT는 PostScript, TrueType, OpenType, WOFF (Web Open Font Format) 글꼴 등이 포함됩니다.

try {
  const availableFonts = await window.queryLocalFonts({
    postscriptNames: ['ComicSansMS'],
  });
  for (const fontData of availableFonts) {
    // `blob()` returns a Blob containing valid and complete
    // SFNT-wrapped font data.
    const sfnt = await fontData.blob();
    // Slice out only the bytes we need: the first 4 bytes are the SFNT
    // version info.
    // Spec: https://docs.microsoft.com/en-us/typography/opentype/spec/otff#organization-of-an-opentype-font
    const sfntVersion = await sfnt.slice(0, 4).text();

    let outlineFormat = 'UNKNOWN';
    switch (sfntVersion) {
      case '\x00\x01\x00\x00':
      case 'true':
      case 'typ1':
        outlineFormat = 'truetype';
        break;
      case 'OTTO':
        outlineFormat = 'cff';
        break;
    }
    console.log('Outline format:', outlineFormat);
  }
} catch (err) {
  console.error(err.name, err.message);
}

데모

demo를 참조하세요. 또한 소스 코드를 참조하세요. 데모 는 <font-select>라는 맞춤 요소를 보여줍니다. 로컬 글꼴 선택기를 구현합니다.

개인정보 보호 고려사항

"local-fonts" 권한이 지문이 많이 사용되는 노출 영역을 제공하는 것으로 보입니다. 하지만 브라우저는 원하는 것을 자유롭게 반환할 수 있습니다. 예를 들어 익명성에 중점을 둔 브라우저에서 브라우저에 내장된 기본 글꼴 모음만 제공할 수 있습니다. 마찬가지로 브라우저가 디스크에 나타나는 대로 테이블 데이터를 정확하게 제공하도록 합니다.

가능한 경우, Local Font Access API는 몇 가지 요구사항이 있습니다 시스템 API는 글꼴 설치 순서입니다. 정확히 일치하는 그러한 시스템 API에서 제공한 설치된 글꼴은 디지털 지문 수집, 활성화하려는 사용 사례는 이 순서를 유지해도 도움이 되지 않습니다. 이 API를 사용하려면 반환된 데이터를 정렬한 다음 반환해야 합니다.

보안 및 권한

Chrome팀은 핵심 원칙을 사용하여 Local Font Access API를 설계하고 구현했습니다. 강력한 웹 플랫폼 기능에 대한 액세스 제어에 정의됨(사용자 포함) 관리, 투명도 및 인체공학을 중시합니다.

사용자 제어

사용자의 글꼴에 대한 액세스는 전적으로 사용자가 제어할 수 있으며 "local-fonts" 권한( 권한 레지스트리가 부여됩니다.

투명성

사이트에 사용자의 로컬 글꼴에 대한 액세스 권한이 부여되었는지 여부는 사이트 정보 시트.

권한 지속성

"local-fonts" 권한은 페이지를 새로고침해도 유지됩니다. 취소는 사이트 정보 시트에 액세스할 수 있습니다.

의견

Chrome팀에서 Local Font Access API 사용 경험에 관한 의견을 듣고자 합니다.

API 설계에 대해 알려주세요.

API에서 예상대로 작동하지 않는 부분이 있나요? 또는 누락된 메서드가 있나요? 속성이 있나요? 보안에 대한 질문이나 의견이 있으면 무엇인가요? 해당 GitHub 저장소에서 사양 문제를 신고하거나 문제를 해결할 수 있습니다

구현 문제 신고

Chrome 구현에서 버그를 발견하셨나요? 아니면 구현이 사양과 다른가요? new.crbug.com에서 버그를 신고합니다. 최대한 자세하게 작성해 주시기 바랍니다. 구성요소 상자에 Blink>Storage>FontAccess를 입력합니다. Glitch는 쉽고 빠른 재현을 공유하는 데 효과적입니다.

API 지원 표시

Local Font Access API를 사용할 계획이신가요? 여러분의 공개적 지원은 Chrome팀이 다음을 수행하는 데 도움이 됩니다. 기능의 우선순위를 지정하고 해당 기능을 지원하는 것이 얼마나 중요한지 다른 브라우저 공급업체에 보여줍니다.

해시태그를 사용하여 @ChromiumDev에 트윗을 보냅니다. #LocalFontAccess 동안 사용자가 어디에서 어떻게 사용하는지 알 수 있습니다.

감사의 말씀

Local Font Access API 사양은 에밀 A. Eklund 알렉스 러셀, 조슈아 벨 올리비에 입통. 이 기사에 대해 리뷰한 사용자 조 메들리, 도미니크 뢰체스, 올리비에 입통. 히어로 이미지 제공자 브렛 조던 켜짐 스플래시 해제.