@font-face

Odpowiedz Nowy wątek
2020-03-26 21:59

Rejestracja: 5 lat temu

Ostatnio: 2 godziny temu

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>
edytowany 1x, ostatnio: Toficjusz, 2020-03-26 22:28

Pozostało 580 znaków

2020-03-26 22:23

Rejestracja: 2 lata temu

Ostatnio: 26 minut temu

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

edytowany 1x, ostatnio: Freja Draco, 2020-03-26 22:26
Hej! Twój post prawdopodobnie zawiera niesformatowany kod. Użyj znaczników ``` aby oznaczyć, co jest kodem, będzie łatwiej czytać. (jestem botem, ta akcja została wykonana automatycznie, prawdopodobieństwo 0.99612355) - Tasmanian Devil 2020-03-26 22:26

Pozostało 580 znaków

2020-03-27 01:04

Rejestracja: 8 lat temu

Ostatnio: 2 godziny temu

Lokalizacja: Grudziądz/Bydgoszcz

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

edytowany 2x, ostatnio: mr_jaro, 2020-03-27 01:07

Pozostało 580 znaków

2020-03-27 08:41

Rejestracja: 5 lat temu

Ostatnio: 2 godziny temu

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?

edytowany 1x, ostatnio: Toficjusz, 2020-03-27 08:43

Pozostało 580 znaków

2020-03-27 09:48

Rejestracja: 2 lata temu

Ostatnio: 26 minut temu

0

Wszystkie
Poprawka: Nie wszystkie.


edytowany 1x, ostatnio: Freja Draco, 2020-03-27 16:05

Pozostało 580 znaków

2020-03-27 10:01

Rejestracja: 5 lat temu

Ostatnio: 2 godziny temu

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.

Pozostało 580 znaków

2020-03-27 10:11

Rejestracja: 2 lata temu

Ostatnio: 26 minut temu

0

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


Pozostało 580 znaków

m31
2020-03-27 11:26
m31

Rejestracja: 1 rok temu

Ostatnio: 6 minut temu

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

edytowany 2x, ostatnio: m31, 2020-03-27 11:32

Pozostało 580 znaków

2020-03-27 11:35

Rejestracja: 4 lata temu

Ostatnio: 58 minut temu

Lokalizacja: Piwnica

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.


Pozostało 580 znaków

2020-03-27 11:49

Rejestracja: 5 lat temu

Ostatnio: 2 godziny temu

0

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

Pozostało 580 znaków

2020-03-27 11:56

Rejestracja: 4 lata temu

Ostatnio: 58 minut temu

Lokalizacja: Piwnica

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.


Pozostało 580 znaków

Odpowiedz

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