Keskustelu: Nettisivujen teko: CSS ja fontit

Hei,

Tulisiko kenellekkään mieleen hyvää keinoa käyttää hieman koristeellisempia fontteja web sivulla? Asensin itselleni uuden fontin koneelle ja se näkyi sillä koneella hyvin webissä, muttei kannettavalla. Tietenkin vaihtoehto olisi tallentaa kuvaksi, mutta se olisi hieman kömpelöä. Onko tähän olemassa muuta tapaa?

Yksi vaihtoehtohan voisi olla PHP:n GD-kirjaston käyttö.
Ensin tallennat haluamasi fontin palvelimelle, ja käytät imagettftext funktiota tekstin piirtämiseen haluamallasi fontilla.

Tässä vielä esimerkki:

<?php

header("Content-type: image/png");

$im = imagecreatetruecolor(400, 30);

$white = imagecolorallocate($im, 255, 255, 255);
$black = imagecolorallocate($im, 0, 0, 0);
imagefilledrectangle($im, 0, 0, 399, 29, $white);

$text = 'Testing...';

$font = 'arial.ttf';

imagettftext($im, 20, 0, 10, 20, $black, $font, $text);

imagepng($im);
imagedestroy($im);

?>

Kuvat tai sIFR.

Kuvat
Kun tekee esim. palvelinpään skriptin, joka osaa tallentaa tekstistä kuviksi, niin homma pelittää ihan hyvin. Tällöin täytyy muistaa lisätä sama teksti css:llä piilotettuna myös, jotta hakukoneet ja laitteet jotka eivät näytä kuvia, näkevät saman "tekstin".
<edit>Tumettaja kerkisikin tähän väliin</edit> Itse tosin tekisin tuon sellaiseksi, että teksti tallennettaisiin väliaikaishakemistoon, eikä rasitettaisi palvelinta koko aikaa. Kuva rakennettaisiin ihan funktion avulla, joka palauttaisi esim. kuvan urlin.

sIFR
sIFR:llä saa hyvää jälkeä aikaiseksi, mutta omasta kokemuksesta voin kertoa, että css-tyylejä saa romplata useaan kertaan, useaan paikkaan, jotta tekstin koko/välistys/yms. pysyvät suht' siedettävinä eri alustoilla.

Vaatii flashin, mutta tehty näyttämään tekstinä jos sitä ei käyttäjältä löydy.

Lebe80 kirjoitti:

sIFR
sIFR:llä saa hyvää jälkeä aikaiseksi, mutta omasta kokemuksesta voin kertoa, että css-tyylejä saa romplata useaan kertaan, useaan paikkaan, jotta tekstin koko/välistys/yms. pysyvät suht' siedettävinä eri alustoilla.

Vaatii flashin, mutta tehty näyttämään tekstinä jos sitä ei käyttäjältä löydy.

Ihan ok, mutta kuitenkin aiheuttaa pienen selaamisekokemuksen huononemisen, ainakin itselläni. Tekstin kopiointi, vierityksen toimiminen tekstin päällä yms. vaikeutuvat erinäisillä alustoilla, ja latausajat ja prosessorikäyttö kasvavat. Ja käyttökin on omanlaistaan kikkailua.. En suosittele, ellei sivuston ulkoasulle ole asetettu erittäin tarkkoja vaatimuksia.

Noniin, homma toimiikin muuten hyvin mutta taustaksi pitäisi saada transparent! Onko tämä mahdollista, ilmeisestikkin png on oikea kuvatyyppi tähän, mutta miten asettaa läpinäkyvä tausta?

Tausta jonka päälle kirjoitus tulee ei myöskään ole yksivärinen :)

css3:
http://www.css3.info/preview/web-fonts-with-font-face/

CSS3 kyllä kiinnostaisi, mutta selainten tuki näyttää olevan kovin harvassa :/