Używanie zaawansowanej typografii z czcionkami lokalnymi

Dowiedz się, jak interfejs Local Font Access API umożliwia dostęp do lokalnie zainstalowanych czcionek użytkownika i uzyskiwanie szczegółowych informacji o nich

Thomas Steiner

Bezpieczne czcionki internetowe

Jeśli zajmujesz się tworzeniem stron internetowych wystarczająco długo, możesz zapamiętać tzw. bezpieczne czcionki internetowe. Te czcionki są dostępne w prawie wszystkich instancjach najczęściej używanych systemów operacyjnych (czyli Windows, macOS – najpopularniejsze dystrybucje Linuksa, Android i iOS). Na początku 2000 roku Microsoft wyprzedził nawet inicjatywa TrueType Cores for the Web. zgodnie z którym „za każdym razem, gdy odwiedzisz witrynę, w której się one znajdują, zobaczysz strony dokładnie takie same przez projektanta witryny”. Tak, te uwzględnione witryny ustawiono w Comic Sans MS. Oto klasycznego internetowego stosu bezpiecznych czcionek (z najlepszą opcją zastępczego sans-serif. ) może wyglądać tak:

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

Czcionki internetowe

Kiedyś czasy, kiedy bezpieczne były czcionki w internecie, już minęły. Dziś mamy czcionki internetowe, niektóre z nich a nawet zmienne czcionki, które możemy dodatkowo ulepszyć, zmieniając wartości atrybutu różne odsłonięte osie. Aby używać czcionek internetowych, deklaruj atrybut @font-face na początku kodu CSS, określające pliki czcionek do pobrania:

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

Następnie możesz użyć niestandardowej czcionki internetowej, określając atrybut font-family jak zwykle:

body {
  font-family: 'FlamboyantSansSerif';
}

Czcionki lokalne jako wektor odcisku palca

Większość czcionek internetowych pochodzi z sieci. Interesująca jest jednak to, że Właściwość src w obszarze @font-face z pominięciem url() , akceptuje również local() . Umożliwia to lokalne ładowanie niestandardowych czcionek (zaskakujące!). Jeśli użytkownik ma FlamboyantSansSerif zainstalowany w systemie operacyjnym, zamiast w trakcie pobierania:

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

Takie podejście zapewnia dobry mechanizm awaryjny, który potencjalnie pozwala zaoszczędzić przepustowość. W internecie nie możemy mieć ładnych rzeczy. Problem z funkcją local() polega na tym, że może być ona wykorzystywane do obsługi odcisków cyfrowych w przeglądarce. Lista czcionek zainstalowanych przez użytkownika może i identyfikacji. Wiele firm ma własne czcionki firmowe instalowane na laptopy. Na przykład firma Google ma firmową czcionkę o nazwie Google Sans.

Aplikacja Font Book na system macOS z podglądem czcionki Google Sans.
Czcionka Google Sans zainstalowana na laptopie pracownika Google.

Osoba przeprowadzająca atak może spróbować określić, dla jakiej firmy pracuje, przeprowadzając testy pod kątem obecności wiele znanych firmowych czcionek, takich jak Google Sans. Osoba przeprowadzająca atak może spróbować wyrenderować tekst ustawiane są za pomocą tych czcionek na płótnie i mierzą glify. Jeśli glify pasują do znanego kształtu korporacyjnej, oznacza to, że atakujący miał atak. Jeśli glify nie pasują do siebie, atakujący wie, że została użyta domyślna czcionka zastępcza, ponieważ czcionka firmowa nie została zainstalowana. Szczegółowe informacje znajdziesz ten i inne ataki przy użyciu odcisków cyfrowych dokument ankietowy autorstwa użytkownika Laperdix i in.

Czcionki należące do firmy, można zidentyfikować nawet listę zainstalowanych czcionek. Sytuacja firmy że ten wektor ataku jest tak poważny, że zespół WebKit zdecydował(a) to „włącz tylko [z listy dostępnych czcionek] czcionki internetowe i czcionki dostarczane z maszyną wirtualną systemu, ale nie lokalnie zainstalowanych przez użytkownika”. (Oto artykuł na temat przyznawania dostępu z czcionkami lokalnymi).

Interfejs Local Font Access API

Początek tego artykułu mógł wprowadzić Cię w kiepski nastrój. Czy możemy naprawdę rzeczy? Bez litości. Myślę, że możemy to zrobić. wszystko nie jest beznadziejne. Najpierw jednak odpowiem na pytanie, które być może zadajesz sobie.

Dlaczego potrzebujemy interfejsu Local Font Access API, gdy dostępne są czcionki internetowe?

Narzędzia do projektowania i grafiki wysokiej jakości były w przeszłości trudne sieci. Przeszkodą było brak dostępu do tak wielu narzędzi i narzędzi zawodowych, czyli skonstruowane czcionki z hintingiem, które projektanci zainstalowali lokalnie. Czcionki internetowe umożliwiają publikowanie niektórych treści przypadków użycia, ale nie włączy programowego dostępu do kształtów glifów wektorowych i tabel czcionek używanych przez rasteryzatory w celu renderowania obrysów glifów. Nie ma również możliwości uzyskania dostępu do pliku binarnego czcionki internetowej i skalowalnych danych.

  • Narzędzia do projektowania potrzebują dostępu do bajtów czcionek, aby przeprowadzać własną implementację układu OpenType i zezwolić narzędzi do projektowania, które można przykuwać na niższych poziomach, np. wykonywać filtry wektorowe przekształca kształt glifów.
  • Deweloperzy mogą mieć starsze stosy czcionek dla swoich aplikacji, które udostępniają w internecie. Aby korzystać z tych stosów, zwykle wymagają one bezpośredniego dostępu do danych czcionek. Czcionki internetowe i udostępniania.
  • Niektóre czcionki mogą nie być objęte licencją na przesyłanie przez internet. Na przykład Linotype ma licencję na niektóre czcionki służące tylko do korzystania z komputerów.

Interfejs Local Font Access API stanowi próbę rozwiązania tych problemów. Składa się z 2 części:

  • font enumeration API, który umożliwia użytkownikom przyznawanie dostępu do pełnego zestawu dostępnych systemów. czcionki.
  • Z każdego wyniku wyliczania możliwość żądania kontenera SFNT niskopoziomowego (zorientowanego na bajty) dostęp, który obejmuje pełne dane czcionek.

Obsługa przeglądarek

Obsługa przeglądarek

  • Chrome: 103.
  • Edge: 103.
  • Firefox: funkcja nieobsługiwana.
  • Safari: nieobsługiwane.

Źródło

Jak korzystać z interfejsu Local Font Access API

Wykrywanie cech

Aby sprawdzić, czy interfejs Local Font Access API jest obsługiwany, wpisz:

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

Wyliczanie czcionek lokalnych

Aby uzyskać listę lokalnie zainstalowanych czcionek, musisz wywołać funkcję window.queryLocalFonts(). za pierwszym razem spowoduje to wyświetlenie prośby o przyznanie uprawnień, którą użytkownik może zatwierdzić lub odrzucić. Jeśli użytkownik zatwierdzi czcionki lokalne do zapytań, przeglądarka zwróci tablicę z danymi czcionek które można zapętlić. Każda czcionka jest reprezentowana jako obiekt FontData o właściwościach family (na przykład "Comic Sans MS"), fullName (np. "Comic Sans MS"), postscriptName (na przykład np. "ComicSansMS") i style (na przykład "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);
}

Jeśli interesują Cię tylko niektóre czcionki, możesz je też filtrować wg PostScriptu przez dodanie parametru postscriptNames.

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

Dostęp do danych SFNT

Pełny dostęp do SFNT jest możliwy za pomocą metody blob() interfejsu FontData obiekt. SFNT to format pliku czcionek, który może zawierać inne czcionki, takie jak PostScript, Czcionki TrueType, OpenType, Web Open Font Format (WOFF) i inne.

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);
}

Prezentacja

Jak działa interfejs Local Font Access API demonstracja poniżej. Zapoznaj się też z kodu źródłowego. Wersja demonstracyjna wyświetla element niestandardowy o nazwie <font-select>, który implementuje lokalny selektor czcionek.

Kwestie dotyczące prywatności

Wygląda na to, że uprawnienie "local-fonts" umożliwia korzystanie z platformy umożliwiającej czytanie odcisku palca. Pamiętaj jednak: które przeglądarki mogą zwracać dowolne treści. Na przykład przeglądarki nastawione na anonimowość mogą aby udostępnić tylko zestaw domyślnych czcionek wbudowanych w przeglądarkę. Przeglądarki nie są też wymagane aby dostarczyć dane tabeli dokładnie w takiej postaci, w jakiej są widoczne na dysku.

Gdy tylko jest to możliwe, interfejs Local Font Access API służy do udostępniania tylko dokładnie tych informacji które są niezbędne do obsługi wspomnianych przypadków użycia. Systemowe interfejsy API mogą generować listę zainstalowanych czcionek, która nie jest w losowej lub posortowanej kolejności, ale w kolejności instalacji czcionek. Zwracana jest dokładnie lista zainstalowane czcionki podane przez taki systemowy interfejs API mogą ujawniać dodatkowe dane, które mogą zostać użyte pobieranie odcisków cyfrowych i przypadki użycia, które chcemy włączyć, nie mają wpływu na zachowanie tej kolejności. Jako ten interfejs API wymaga posortowania zwróconych danych przed ich zwróceniem.

Bezpieczeństwo i uprawnienia

Zespół Chrome zaprojektował i wdrożył interfejs Local Font Access API, kierując się w artykule Kontrola nad dostępem do zaawansowanych funkcji platform internetowych, w tym kontrolę, przejrzystość i ergonomię.

Kontrola użytkowników

Dostęp do czcionek użytkownika jest w pełni pod jego kontrolą i nie będzie dozwolony, chyba że "local-fonts" zgodnie z permission reg (rejestr uprawnień).

Przejrzystość

To, czy witryna otrzymała dostęp do lokalnych czcionek użytkownika, będzie widoczna w sekcji arkuszu z informacjami o witrynie.

Trwałość uprawnień

Po każdym ponownym załadowaniu strony uprawnienia "local-fonts" będą zachowywane. Można go anulować przez informacjami o witrynie.

Prześlij opinię

Zespół Chrome chce dowiedzieć się więcej o Twoich doświadczeniach z interfejsem Local Font Access API.

Opowiedz nam o konstrukcji interfejsu API

Czy jest coś, co nie działa w interfejsie API zgodnie z oczekiwaniami? Czy może brakuje tu metod lub właściwości potrzebne do realizacji pomysłu? Masz pytanie lub komentarz na temat zabezpieczeń model? Zgłoś problem ze specyfikacją w odpowiednim repozytorium GitHub lub dodaj swoje uwagi do do istniejącego problemu.

Zgłoś problem z implementacją

Czy wystąpił błąd z implementacją Chrome? Czy implementacja różni się od specyfikacji? Zgłoś błąd na new.crbug.com. Podaj jak najwięcej szczegółów. instrukcje dotyczące ponownego odtwarzania i wpisz Blink>Storage>FontAccess w polu Komponenty. Usługa Glitch świetnie nadaje się do szybkiego i łatwego udostępniania poprawek.

Pokaż wsparcie dla interfejsu API

Czy planujesz korzystać z interfejsu Local Font Access API? Twoje publiczne wsparcie pomaga zespołowi Chrome w: nadaje priorytet funkcjom i pokazuje innym dostawcom przeglądarek, jak ważne jest ich wsparcie.

Wyślij tweeta na adres @ChromiumDev, używając hashtagu #LocalFontAccess i pozwól gdzie i w jaki sposób go używasz.

Podziękowania

Specyfikacja interfejsu Local Font Access API została edytowana przez użytkownika Emil A. Eklund, Alex Russell, Joshua Bell oraz Olivier Yiptong. Ten artykuł zrecenzował(a) Joe Medley Dominik Röttsches Olivier Yiptong. Baner powitalny: Brett Jordan w Odchylenie.