Kurs CSS odc2. Latin extended

pytanie zadane 13 stycznia 2021 w HTML i CSS przez drizcoll Nowicjusz (130 p.)

Dzień dobry,

Właśnie przerabiam Kurs CSS od 2 Pana Mirosława i trochę utknąłem na dodawaniu linku z fontami w dokumencie HTML. Wersja Google Fonts chyba się trochę zmieniła i generuje mi nieco inaczej wyglądający link z fontami Lato niż jest na kursie w szczególności nie dodaje mi latin extended.

Google Fonts tworzy mi taki kod:

<link href="https://fonts.googleapis.com/css2?family=Lato:wght@400;900&display=swap" rel="stylesheet">

u Pana Mirosława jest tak:

<link href='http://fonts.googleapis.com/css?family=Lato:400,900&subset=latin,latin-ext' rel='stylesheet' type='text/css'>

Czy cos robię nie tak?

komentarz 13 stycznia 2021 przez wizarddos Nałogowiec (25,930 p.)

A działa Jak na kursie? Jedyna różnicę na moje oko w tych fontach po uruchomieniu linku to tylko dodatkowa linijka font-display:swap;

1	komentarz 14 stycznia 2021 przez drizcoll Nowicjusz (130 p.) działa, brakowało mi tylko latin-extended w linijce kodu ale jak widać nie jest to już potrzebne

4 odpowiedzi

odpowiedź 13 stycznia 2021 przez niezalogowany

Wklej aktualnego Fonta i ruszaj dalej....

Powodzenia !

komentarz 14 stycznia 2021 przez drizcoll Nowicjusz (130 p.)

Tak też zrobiłem:) Dzięki

odpowiedź 13 stycznia 2021 przez pablop76 VIP (123,180 p.)
edycja 13 stycznia 2021 przez pablop76

Właściwość CSS display-font pozwala kontrolować, co się dzieje, gdy czcionka jest nadal ładowana lub w inny sposób niedostępna. Zwykle właściwe jest określenie wartości innej niż domyślna .

Do adresu dodany został parametr display=swap. Jest to inna forma ustawienia tej właściwości.

Te kursy są stare i traktuj je jako wstęp, ogólna koncepcję, wprowadzenie, albo poszukaj aktualnych.

komentarz 14 stycznia 2021 przez drizcoll Nowicjusz (130 p.)

Właśnie nie wiedziałem co to jest ten display=swap. . Dzięki:)

odpowiedź 13 stycznia 2021 przez NoOgar95 Dyskutant (9,310 p.)

Cześć,

Nie, zmieniło się to i nie ma teraz informacji o rozszerzeniu latin-ext, znaki diakrytyczne będą działać poprawnie.

Pozdrawiam

komentarz 14 stycznia 2021 przez drizcoll Nowicjusz (130 p.)

Dzięki za odpowiedź:) Podrawiam

odpowiedź 13 stycznia 2021 przez VBService Ekspert (253,340 p.)
edycja 13 stycznia 2021 przez VBService

Nowy link m. in. nie zawiera już wpisu: type='text/css'

It's not required with the HTML5 spec ...

Skrypt, który jest pobierany z tego linka (nowego co podałeś)

<link href="https://fonts.googleapis.com/css2?family=Lato:wght@400;900&display=swap" rel="stylesheet">

już zawiera w sobie odniesienie do latin extended (latin-ext)

/* latin-ext */
@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/lato/v17/S6uyw4BMUTPHjxAwXjeu.woff2) format('woff2');
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/lato/v17/S6uyw4BMUTPHjx4wXg.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/lato/v17/S6u9w4BMUTPHh50XSwaPGR_p.woff2) format('woff2');
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/lato/v17/S6u9w4BMUTPHh50XSwiPGQ.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

no i na koniec zrób test np. na polskie "ogonki"

<!DOCTYPE html>
<html lang="pl">
  <head>
    <meta charset="utf-8">
    <link href="https://fonts.googleapis.com/css2?family=Lato:wght@400;900&display=swap" rel="stylesheet">

    <style>
      p {
        font: 1.2em/1.6em 'Lato';
        margin: 0.5em;
        padding: 0.5em;
      }
      p:nth-child(odd) {
        background-color: rgba(184,198,219,1);
      }
      p:nth-child(even) {
        background-color: rgba(157,189,214,1);
      }
      p:nth-child(2n+1) { /* odd for IE */
        background-color: rgba(184,198,219,1);
      }
      p:nth-child(2n+2) { /* even for IE */
        background-color: rgba(157,189,214,1);
      }
    </style>
  </head>
  <body>
    <p>Zdania pobrane z: "<a href="https://www.papilot.pl/lifestyle/ciekawostki/31873/trudne-zdania-w-jezyku-polskim" target="_blank">... zdania, z którymi kłopot mają nawet zawodowi lektorzy.</a>"</p>
    <p>Dżdżystym rankiem gżegżółki i piegże, zamiast wziąć się za dżdżownice, nażarły się na czczo miąższu rzeżuchy i rzędem rzygały do rozżarzonej brytfanny.</p>
    <p>Mała muszka spod Łopuszki chciała mieć różowe nóżki – różdżką nóżki czarowała, lecz wciąż nóżki czarne miała. – Po cóż czary, moja muszko? Ruszże móżdżkiem, a nie różdżką! Wyrzuć wreszcie różdżkę wróżki i unurzaj w różu nóżki!</p>
    <p>Leży Jerzy na wieży i nie wierzy, że na drugiej wieży wśród stada nietoperzy leży drugi Jerzy.</p>
    <p>Gdy Pomorze nie pomoże, to pomoże może morze, a gdy morze nie pomoże to pomoże może las.</p>
  </body>
</html>