@font-face

0
/* roboto-300 - latin-ext_latin */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 300;
  src: url('../fonts/roboto-v20-latin-ext_latin-300.eot'); /* IE9 Compat Modes */
  src: local('Roboto Light'), local('Roboto-Light'),
       url('../fonts/roboto-v20-latin-ext_latin-300.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/roboto-v20-latin-ext_latin-300.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/roboto-v20-latin-ext_latin-300.woff') format('woff'), /* Modern Browsers */
       url('../fonts/roboto-v20-latin-ext_latin-300.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/roboto-v20-latin-ext_latin-300.svg#Roboto') format('svg'); /* Legacy iOS */
}

/* roboto-regular - latin-ext_latin */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/roboto-v20-latin-ext_latin-regular.eot'); /* IE9 Compat Modes */
  src: local('Roboto'), local('Roboto-Regular'),
       url('../fonts/roboto-v20-latin-ext_latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/roboto-v20-latin-ext_latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/roboto-v20-latin-ext_latin-regular.woff') format('woff'), /* Modern Browsers */
       url('../fonts/roboto-v20-latin-ext_latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/roboto-v20-latin-ext_latin-regular.svg#Roboto') format('svg'); /* Legacy iOS */
}

Pobrałem czcionki z zakresem latin-ext. W takim przypadku nie muszę dodawać unicode-range?
Dlaczego src local ma dwie nazwy? -> src: local('Roboto Light'), local('Roboto-Light').
Wystarczy żeby w url były czcionki woff2, woff i ttf? Resztę mogę usunąć?

Jaki jest najlepszy sposób odwołania się do reguły @font-face?

<section>
   font-family: 'Roboto';
   font-style: normal;
   font-weight: 300;
</section>

a może wystarczyć odwołać się do src: local?

<section>
   font-family: 'Roboto-Light'
</section>
1

Pobrałem czcionki z zakresem latin-ext. W takim przypadku nie muszę dodawać unicode-range?

Nie musisz.

Dlaczego src local się ma dwie nazwy?

CSS będzie próbował znaleźć plik pasujący do pierwszej lub drugiej nazwy.

Wystarczy żeby w url były czcionki woff2, woff i ttf? Resztę mogę usunąć?

Wtedy jakieś 2% użytkowników ich nie zobaczy:
https://caniuse.com/#search=woff

SECTION {
  font-family:'Roboto', Arial, Tahoma, Helvetica, sans-serif;
  font-weight: 300;
}
2
Freja Draco napisał(a):

Wtedy jakieś 2% użytkowników ich nie zobaczy:

Zaznaczmy, że te osoby i tak zobaczą rozwaloną stronę o ile jest pisana w najnowszych standardach więc nie ma się czym przejmować ;) osobiście daję już sam woff i woff2

0

Jeżeli na stronie mam np. 6 reguł @font-face. W moim CSS odwołam się tylko do dwóch. To wtedy pobierane są tylko te dwie reguły? czy wszystkie?

0

Wszystkie
Poprawka: Nie wszystkie.

0

To gdzie w tym wszystkim optymalizacja czcionek?
Czym to się różni od standardowego

<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap&subset=latin-ext">

Pobiera nam tylko latin-ext i grubości, które potrzebujemy.

0

To wrzucaj tylko takie @font-face, których potrzebujesz.

3

Nie no, ściągną się tylko te fonty, które aktualnie są używane na stronie. Możesz sobie wpisać 1500 @font-face, ale jeśli na stronie w css nie będzie odwołania do tego fontu, to przeglądarka (nowoczesna przeglądarka - czyli nie IE) nie będzie ich ściągać.

Czyli jeśli na przykład zadeklarujesz font z weight 300, a na stronie nigdzie nie będzie wykorzystywany - to się po prostu nie ściągnie.

Specyfikacja:

Multiple @font-face rules can be used to construct font families with a variety of faces. Using CSS font matching rules, a user agent can selectively download only those faces that are needed for a given piece of text.

https://drafts.csswg.org/css-fonts-3/#font-face-rule

1

Tutaj możesz użyć jakiegoś frameworka backendowego i ładować fonty w zależności od widoku który wyświetlasz, dodatkowo cache przeglądarki załatwi sprawę i nie będzie musiało się ładować za każdym razem.

0

Gdzie umieszczacie reguły @font-face? w osobnych arkuszach stylów czy w głównym main.css?

0
Toficjusz napisał(a):

Gdzie umieszczacie reguły @font-face? w osobnych arkuszach stylów czy w głównym main.css?

Zależy od wielkości projektu, możesz w głównym, albo, jak pisałem ładować jak zajdzie potrzeba.

1
m31 napisał(a):

Nie no, ściągną się tylko te fonty, które aktualnie są używane na stronie. Możesz sobie wpisać 1500 @font-face, ale jeśli na stronie w css nie będzie odwołania do tego fontu, to przeglądarka (nowoczesna przeglądarka - czyli nie IE) nie będzie ich ściągać.

Faktycznie. Dzięki za pouczenie.

W razie braku plików z fontami przeglądarki zgłaszają błąd na etapie @font-face, co mnie zmyliło :/

0

Dyrektywa Cache-Control jest po stronie serwera i back-endu?

0

Co myślicie o takiej optymalizacji?

1 użytkowników online, w tym zalogowanych: 0, gości: 1