Zagadka HTML+CSS: czy tu są fonty?

Zagadka HTML+CSS: czy tu są fonty?

Wszyscy publikują zagadki to dopiszę i ja!

Jak w HTML+CSS uzależnić font-size i letter-spacing od aktualnego font-family?

Chodzi o sytuację w której używamy reguły:

font-family: ‚Trebuchet MS’, sans-serif;

i chcemy by sans-serif miała inną wielkość, wysokość wiersza i odstępy między znakami niż Trebuchet. Owa machina wojenna występuje zwykle na windowsach, a na makach nie zawsze. Na linuksach zwykle jest nieobecna.  I jak to teraz ugryźć? Do różnych rozdzielczości mamy media query. Do wykrycia niebieskiego e z orbitką mamy komentarze warunkowe. A jak wykryć obecność i nieobecność danej czcionki w systemie? 

Podpowiem: comic sans zwykle jest wgrany.

Oczekuję działającego rozwiązania 🙂 Albo chociaż jego zarysu. Bez zerkania do istniejących rozwiązań wg Google.

  • Pierwsze co mi przyszło na myśl to ’em’, ale to raczej nie o to chodzi.
    Ja bym ustawił priorytetowo dwie klasy np A i B, w klasie A font a z sizem x, w klasie B font b s sizem y. Trebuchet jako druga, jeśli się nie zaczyta (brak fontu w systemie) zostanie zadeklarowana jako pierwsza sans-serif.

    Inkszej metody nie znam 😉 I nie wiem czy to zadziała 🙂

  • Linijka jak w notce zmusza przeglądarkę do wczytania drugiej czcionki gdy pierwszej nie ma. Czyli gdy nie ma trebucheta, wczytany będzie sans-serif.
    To co napisałeś nie zadziała, bo font-size wczyta się zgodnie z zasadami kaskadowości, brak fontu w systemie jest bez wpływu na to.

  • Kret

    W specyfikacji CSS 2 (http://www.w3.org/TR/1998/REC-CSS2-19980512/fonts.html) była własność font-size-adjust, która właśnia miała służyć do tego co chcesz zrobić. Wycofali się z tego ze względu na brak wsparcia i usunęli z specyfikacji CSS 2.1, która jest standardem.

  • .A{
    font-family: sans-serif;
    font-size: 2em;
    }

    .B{
    font-family: Trebuchet;
    fonts-size: 100em;
    }

    <div class=”A B”>blabla</div>

    ^to nie zadziałą?

  • Comandeer

    w CSS3 font-size-adjust powraca (http://www.w3.org/TR/css3-fonts/#font-size-adjust-prop), ale nie ma de facto jeszcze żadnego wsparcia (chyba IE coś tam ma)
    no i moje rozwiązanko 😉
    <!DOCTYPE html>
    <html lang=”pl” dir=”ltr”>
    <head>
    <meta charset=”UTF-8″>
    <title>Ehhhh</title>
    <style>
    #c,#d
    {
    font-size:100em;
    visibility:hidden;
    position:absolute;
    left:-9999px;
    }
    #c
    {
    font-family:Verdana;
    }
    #d
    {
    font-family:Arial;
    }
    </style>
    </head>
    <body>
    <script>
    document.body.innerHTML+='<div id=”c”>A</div><div id=”d”>A</div>’;
    console.log(document.getElementById(‚c’).clientWidth==document.getElementById(‚d’).clientWidth);
    </script>
    </body>
    </html>

    tak głupie i prymitywne, że aż działa 😀

  • Że co?

  • @n3m0:
    Zaskoczy styl nadany dla klasy B nawet jeśli font-family się wizualnie nie zmieni

    @Comandeer
    O to chodziło. Możnaby tylko naćkać więcej literek do porównania, a potem zauważyć że czcionka która jest w systemie zawsze – arial albo verdana albo comic sans będzie mieć szerokość inną niż testowana czcionka jeśli testowana jest obecna w systemie. Gdy testowanej nie ma – robi się fallback do posiadanej czcionki, szerokość elementów jest identyczna.
    Teraz moglibyśmy dodać do body lub html klasę wskazującą czy font jest czy nie ma, a dalej działamy tak jak mając zwykły modernizr.

    Problem solved!