Keskustelu: Nettisivujen teko: [CSS] Woff fontti ei tulostu oikein

Osa (uusista) selaimista ei halua tulostaa woff-fontteja kunnolla.

@font-face {
  font-family: 'Yanone Kaffeesatz';
  font-style: normal;
  font-weight: 400;
  src: local('Yanone Kaffeesatz Regular'), local('YanoneKaffeesatz-Regular'), url('http://themes.googleusercontent.com/static/fonts/yanonekaffeesatz/v3/YDAoLskQQ5MOAgvHUQCcLRTHiN2BPBirwIkMLKUspj4.woff') format('woff');
}
@font-face {
  font-family: 'Tangerine';
  font-style: normal;
  font-weight: normal;
  src: local('Tangerine'), url('http://themes.googleusercontent.com/static/fonts/tangerine/v3/HGfsyCL5WASpHOFnouG-RD8E0i7KZn-EPnyo3HZu7kw.woff') format('woff');
}

Kaikki uudet selaimet (IE, Chrome, Opera, Firefox ja Safari) näyttävät ne näytöllä hyvin, mutta tulostuksen esikatselussa on erilaisia lopputuloksia: IE ja Opera ok, Chrome toimii yleensä, Safari enimmäkseen tyhjää, Firefox ei toimi ollenkaan.

Eli tarkoitus olisi saada fontit tulostumaan oikein Chromessa, Safarissa ja Firefoxissa. Chromessa ja Safarissa on sama vika - Chromessa joskus, Safarissa aina - eli

Lorem ipsum dolor sit amet

näyttää jotakuinkin

o   t g     X   gg  a    #

Fontti on kuitenkin oikean muotoista, mutta osa kirjaimista menee päällekäinkin.

Firefox taas näyttää suosiolla elementin kakkosfontin.

Oletko tarkastanut fontin lisenssin? Jotkin fontit on tarkoitettu vain webkäyttöön, jolloin tulostuslisenssin puuttuessa niitä ei periaatteessa pitäisi voida tulostaa ylipäätään. Tämä tosin vain oman käsitykseni mukaan. Pikaisella googlauksella Firefox 3.6 pystyi tulostamaan webfontteja WOFF-tuen tullessa vuonna 2010.

Google Web Fonts kirjoitti:

The fonts in the directory are all released under open source licenses; you can use them on any non-commercial or commercial project.

Ei niissä pitäisi olla mitään rajoituksia. En ainakaan löytänyt mitään sellaiseen viittaavaa.

Ainakin Firefoxin osalta tämä on tunnettu bugi jo vuodesta 2008:
https://bugzilla.mozilla.org/show_bug.cgi?id­=468568
Korjausta ei näytä olevan näköpiirissä.

Sain "korjattua" vian säätämällä sansin ja sans-serifin kanssa. Niillä sai jopa lähes saman näköistä tekstiä. Haittapuolena onkin, että se joudutaan tekemään monen hyvän selaimen kustannuksella. :(

Olisipa olemassa joku standardi tapa arvata, mikä selain on kyseessä. Vaikka se IE:n ehdollinen kommentti, sillähän voi saada aikaan aika paljon.

Tässä skenaariossa olisi varmaan ihan perusteltua tutkia User-Agenttia ja selaimista tunnettuja ominaisuuksia ymv. kikkoja. Yhdistelemällä näitä saat varmasti aikaan melko tarkan tunnistuksen. Et varmaankaan käytä Yanone Kaffeesatzia missään kriittisessä sisällöissä kuten laskuissa?;) Voit myös lisätä sivuille ilmoituksen mahdollisista huonoista tulostuksista sekä mahdollisuuden ohittaa tunnistuksen.

Se on toimiva idea tälle päivälle, mutta aiheuttaa ongelmia myöhemmin jos/kun bugi korjataan.

Yksi tapa korjata ongelma on laittaa kävijöille ehdotus asentaa fontti koneelle tulostusta varten, jolloin fontin latautumisongelma ei pääse iskemään.

tsuriga kirjoitti:

Et varmaankaan käytä Yanone Kaffeesatzia missään kriittisessä sisällöissä kuten laskuissa?

Kyseessä on sivupohja, ja hienoa fonttia käytetään todella kriittisissä kohdissa eli, sloganissa yhtä ja kaikissa otsikoissa toista (en muista, kummin päin; näky on kummallakin fontilla sama).

lainaus:

Voit myös lisätä sivuille ilmoituksen mahdollisista huonoista tulostuksista sekä mahdollisuuden ohittaa tunnistuksen.

Hyvä ajatus. Eli sehän onnistuu Turvallinen tulostus -napilla, joka pakottaa elementtien fontin sansiksi ja sans-serifiksi (jonka jälkeen käyttäjä tulostaa sivun ja ottaa napin pois päältä).

Merri kirjoitti:

Yksi tapa korjata ongelma on laittaa kävijöille ehdotus asentaa fontti koneelle tulostusta varten, jolloin fontin latautumisongelma ei pääse iskemään.

Melko hankala (nopeasti mietittynä), mutta voin laittaa sen readme:hin. Kun se kerran on ladattu, se toimii muillakin sivuilla, ihan hyvä sinänsä.

jukkah kirjoitti:

hienoa fonttia käytetään todella kriittisissä kohdissa eli, sloganissa yhtä ja kaikissa otsikoissa toista (en muista, kummin päin; näky on kummallakin fontilla sama)

Jos käytetty graafinen ohjeisto sisältää ainoastaan yhden tyylimäärittelyn ko. elementeille (slogan ja otsikko), ts. jos halutaan elementtien näyttäytyvän aina samanlaisina, käytä kuvia. Hieman outoa kutsua kohtia kriittisiksi jos on kuitenkin hyväksyttävää, että tyyli muuttuu. Sivuhuomiona esim. NoScript blokkaa kirjasinten latauksen.

tsuriga kirjoitti:

käytä kuvia

Googlebot antaa kovasti plussaa siitä, että otsikot ovat kuvia? Entä jos sivupohjan käyttäjä (joka ei välttämättä ole ohjelmoija) haluaa muuttaa otsikon sisältöä => muutetaan kuvaa; menisi hankalaksi loppukäyttäjän näkökulmasta. Lisäksi leveysriippumattomuus ei anna käyttää kuvia.

lainaus:

Hieman outoa kutsua kohtia kriittisiksi jos on kuitenkin hyväksyttävää, että tyyli muuttuu.

Minusta sivun otsikoiden ei kuulu näyttää tulostettuna seuraavalta.

o   t g     X   gg  a    #

Tältä nimittäin fonttien tulostus näytti Chromella ja Safarilla. Osa selaimista (tässä tapauksessa IE ja Opera) pystyvät hyvään suoritukseen, ja Firefox ei yritäkään. Entä miten on vanhempien selainten laita, ensin tulee varmaan huonoja totelutuksia ja sen jälkeen toteutus puuttuu kokonaan. (Huonot toteutukset tässä ovat niitä hankalia kohtia.)

lainaus:

NoScript blokkaa kirjasinten latauksen.

Siis CSS:n url-funktion?

Toistuuko Chromen ja Safarin ongelma myös tulostuksen esikatselussa?

Valitettavasti oma jaksamiseni ei riitä testailuihin tällä hetkellä.

Tähän asti olen käyttänyt vain tulostuksen esikatselua (mikä ei ole hyvä asia), pitäisi kai viimeinkin ladata se hyvä PDF-tulostinajuri.

jukkah kirjoitti:

Minusta sivun otsikoiden ei kuulu näyttää tulostettuna

Muotoilin asiani huonosti: tarkoitin kriittisiä renderöinnin kannalta, juurikin jos tarkoitus olisi noudattaa jotain tiettyä tyyliä. Pointtini oli siis se, että en usko, että voisit nykyisillä tekniikoilla saavuttaa tekstimuotoisen ulostulon, joka olisi varmuudella aina ohjeiston mukainen. Toki jos ohjeistossa määritellään, että käytetään tyyliä Y kun X ei ole saatavilla niin eipä siinä sitten.

Tekstinhän nyt saa sivulle vaikka kuvan alle piiloon, hakubottien indeksointiin löytyy varmasti keinonsa. Yksi vaihtoehto voisi olla käyttää printtityyleissä kuvaa ja mediassa tekstiä. Muuttuville leveyksillekin löytyy vaihtoehtoja. Toki se on staattinen ratkaisu, mutta en näe muuta tapaa varmistaa konsistentti tuloste.

jukkah kirjoitti:

tsuriga kirjoitti:

NoScript blokkaa kirjasinten latauksen.

Siis CSS:n url-funktion?

http://hackademix.net/2010/03/24/why-noscript-blocks-web-fonts/

Ok. Täytyy muistaa, että nykyäänkin on vielä tuollaista skriptien blokkailua. En tajunnut NoScriptin olevan Firefoxin (en ole koskaan käyttänyt sitä muuhun kuin testaamiseen) juttu.