Custom fonts in CSS?

[Verwijderd]

Weet iemand of het mogelijk is om andere fonts dat Arial, Verdana e.d. te gebruiken op Internet? Ik heb wel wat gevonden in de volgende trant:

@font-face {
font-family: "VAG Rounded LT Light";
src: url("http://www.domein.nl/font/VAG Rounded LT Light") format("truetype");
}

maar dat werkt toch niet helemaal lekker (zeg maar: niet!). Heeft iemand hier ervaring mee?

[ Voor 8% gewijzigd door Verwijderd op 23-12-2004 15:43 ]

[Verwijderd]

Als je zoekt naar "WEFT" kom je waarschijnlijk wel wat interessante artikelen tegen.
Maar eigenlijk kun je het best alleen de algemeen beschikbare fonts gebruiken.

[Verwijderd]

Hey thanx, interessant!

Maar IE-only zie ik, en aangezien mijn mening is dat een site minimaal FF compatible moet zijn is dit een no-go vrees ik

[OkkE]

Ik heb daar wel eens, een hele tijd geleden, wat mee gedaan.. Maar toen kreeg ik het niet werkend in Mozilla. Erg jammer... die IE-only dingen.

Toch zou ik sowieso kiezen voor een standaard font, en eventueel voor bepaalde kopjes, menu's enz. de tekst als plaatje doen. Zo weet je zeker dat het er overal het zelfde uit ziet, en ook goed leesbaar is.

[ Voor 10% gewijzigd door OkkE op 23-12-2004 15:50 ]

[Chillem.nl]

Wat ook goed werkt voor kopjes in een custom font, is Flash kopjes gebruiken. Die geef je dan in een variable de weer te geven titel mee. Dit wordt bijvoorbeeld gedaan bij de site van 3fm. (waar ik het nu even niet zie btw )

Voordeel: je hoeft niet elke keer images van je kopjes te maken, dit is makkelijk te scripten.

[OkkE]

Chillem.nl schreef op donderdag 23 december 2004 @ 16:09:
Wat ook goed werkt voor kopjes in een custom font, is Flash kopjes gebruiken. Die geef je dan in een variable de weer te geven titel mee. Dit wordt bijvoorbeeld gedaan bij de site van 3fm. (waar ik het nu even niet zie btw )

Voordeel: je hoeft niet elke keer images van je kopjes te maken, dit is makkelijk te scripten.

Persoonlijk vind ik dit fout gebruik van Flash.. Maar oke, het resultaat is wel wat je wil. Ik zou dat echter nog liever met de GD-Lib van PHP een dynamic image maken. Maar dan moet je dat weer wel op je server hebben.
Maar nadeel van Flash vind ik dat je de plug-in moet hebben, en dat zoekmachines er niet zo lekker mee om gaan. Ach... ieder zo z'n smaak.

[Verwijderd]

SFIR moet je gebruiken

[Verwijderd]

SIFR bedoel

[Spruit_elf]

Verwijderd schreef op donderdag 23 december 2004 @ 20:49:
SIFR bedoel

offtopic:
pssst er bestaat zo iets als een edit knop

dat SIFR
http://www.mikeindustries.com/blog/archive/2004/08/sifr eerste deel
http://www.mikeindustries...r-2.0-release-candidate-2 voor de laatste versie

gaat uit van flash om stukken/headers ?tijdens? het laden om te zetten, in feite is dit de flash versie van FIR, zelf zou ik het neit gebruiken omwille van snelheid en schaalbaarheid
zie Mezzoblue daar over


over wat in de TS staat qua css klopt wel, dat is deel van de standaard geweest in css2, maar er ook weer uitgegooid in 2.1
zie ook bovenstaande link van mezzobleu daar over onder de kop "One Solution, of Many"

zelf zou ik het houden bij de standaard fonts en voor logos plaatjes gebruiken, over het algemeen voegen vreemde fonts niet veel toe aan een site (met uitzondering van logos of slogans)

[ Voor 7% gewijzigd door Spruit_elf op 23-12-2004 21:16 ]

[sjaakaq]

Dat @font zou moeten werken;

1-Met WEFT een .eot font maken en uploaden naar server
2-dan

Cascading Stylesheet:

@font-face {
font-family: "barryruiktnaarkaas";
src: url("http://www.domein.nl/naamvanhetfont.eot");
}

3-En dan verderop in de CSS:

Cascading Stylesheet:

element {
font-face: barryruiktnaarkaas, arial, sans-serif;
}

IE only, dat wel. Op mijn site werkt het iig.

[ Voor 5% gewijzigd door sjaakaq op 23-12-2004 23:19 ]

[HawVer]

OkkE schreef op donderdag 23 december 2004 @ 16:31:
[...]

Persoonlijk vind ik dit fout gebruik van Flash.. Maar oke, het resultaat is wel wat je wil. Ik zou dat echter nog liever met de GD-Lib van PHP een dynamic image maken. Maar dan moet je dat weer wel op je server hebben.
Maar nadeel van Flash vind ik dat je de plug-in moet hebben, en dat zoekmachines er niet zo lekker mee om gaan. Ach... ieder zo z'n smaak.

Het probleem met de zoekmachine heb je met dynamic images in php ook. Verder is het een vrij zware methode om een custom font te gebruiken. Dan kun je nog beter een plaatje maken in photoshop maken en die op je website plaatsen.

Ik denk dat het een kwestie van tijd is voordat Mozilla dat ook ondersteund.

[ Voor 6% gewijzigd door HawVer op 24-12-2004 00:00 ]

[Blaise]

Je kan ook deze manier van dynamic images gebruiken die lief is voor google etc. En ik neem aan dat je een dynamisch gemaakt plaatje gewoon kan bewaren op de server zodat alleen de eerste bezoeker last van vertraging heeft.

Het is ook interessant hoe je de populaire fonts met CSS kan veranderen dmv italic, small-caps, bold, uppercase, lowercase (negatieve) letter-spacing en combinaties.

[sjaakaq]

Blaise schreef op vrijdag 24 december 2004 @ 20:04:
Je kan ook deze manier van dynamic images gebruiken die lief is voor google etc. En ik neem aan dat je een dynamisch gemaakt plaatje gewoon kan bewaren op de server zodat alleen de eerste bezoeker last van vertraging heeft.

Het is ook interessant hoe je de populaire fonts met CSS kan veranderen dmv italic, small-caps, bold, uppercase, lowercase (negatieve) letter-spacing en combinaties.

Ik heb dit geprobeerd en het is (sorry) vrij brak;
1-het duurt lang en het ziet er niet uit, dat geknipper (als ie tekst door plaatjes vervangt)
2-sommige letterskomen opeens 4px te hoog te staan, of te laag etc.

[Verwijderd]

ik gebruik ook een dergelijke techniek, alleen ietsje anders

- gewoon html in de source
- geen js
- met css de juiste (background)plaatjes erin kwakken (al dan niet dynamische plaatjes) en de tekst zelf hiden.

dat laatste kan op 2 manieren
- flink grote tekst indent, zodat te tekst buiten je container valt (vergeet overflow: hidden niet)
- span erin die je vervolgens hide (die laatste heeft wel mijn voorkeur eigenlijk)

[Ivos]

Flash voor dit soort doeleinden lijkt me ook een beetje zwaar. Ik vraag me af of de GD-lib gebruiken niet nogal een aanslag doet op je server qua load (ik weet niet precies...)?

Is er trouwens ergens een lijst met lettertypen die standaard met windows meekomen, met eventuele equivalenten onder linux/mac (mn windows is al 'vervluit met veel andere lettertypem, nee ik ga mn windows niet opnieuw installeren )? Ik wil bijvoorbeeld Arial Black graag gebruiken (net ff letterlijk vetter dan de gewone arial). Maar ik wil wel graag weten of die er normaal bij mensen opstaat, en hoe ik zorg dat mensen met linux/mac ook ongeveer zo'n lettertype te zien krijgen, iemand een suggestie?

[ Voor 4% gewijzigd door Ivos op 02-01-2005 23:24 ]

[Thijsmans]

!vo schreef op zondag 02 januari 2005 @ 23:22:
Flash voor dit soort doeleinden lijkt me ook een beetje zwaar. Ik vraag me af of de GD-lib gebruiken niet nogal een aanslag doet op je server qua load (ik weet niet precies...)?

Met goed gebruik is GD absoluut geen aanslag op je serverload Een plaatje maken van 150 x 30 pixels en er wat tekst inflikkeren is absoluut geen moeite. Bovendien is de module al met php/apache opgestart en is dus al gereed.

Je moet bij GD en lookalikes echter wel uitkijken met het meegeven van parameters in de URL met betrekking tot de uit te voeren acties. Toen ik nog op school zat, draaide er een script om images te resizen (was overigens ImageMagick), bijv. 'magick.php/image.gif/150' om afbeelding image.gif naar 150 pixels breed te scalen. Een lolbroek had uitgevonden dat je daar echter ook 1500 of zelfs 15000 voor in de plaats kon zetten. Nu zijn dit nog niet zulke schrikbarende getallen, maar je server gaat wel aardig staan loaden zodra je 150.000 gebruikt

Flash is overigens afhankelijk van de client, en dat wil je niet zijn

[Verwijderd]

Verwijderd schreef op vrijdag 24 december 2004 @ 21:21:dat laatste kan op 2 manieren
- flink grote tekst indent, zodat te tekst buiten je container valt (vergeet overflow: hidden niet)
- span erin die je vervolgens hide (die laatste heeft wel mijn voorkeur eigenlijk)

3 manieren:
als een een flink grote negatieve text-indent gebruikt heb je geen overflow meer nodig.

[crisp]

Negatieve text-indent werkt niet in alle browsers even goed (IE5.0 bijvoorbeeld) waar positieve text-indent met overflow:hidden het wel goed doet (mits de te hiden tekst geen spaties bevat - die kan je echter nog vervangen door non-breaking spaces).
Echter heeft met text-indent tekst toch nog wel eens de neiging naar voren te komen (scrollbeweging met de muis, find-as-you-type in Firefox etcetera).
Een span met display:none is dan inderdaad nog de beste optie, ook al vergt het extra markup...

[AkaXakA]

Ah, maar display:hidden werkt niet goed in screenreaders, gebruik liever position:absolute;
Je houdt wel die extra span, maar ach.

[Ivos]

Prammenhanger schreef op zondag 02 januari 2005 @ 23:32:
[...]


Met goed gebruik is GD absoluut geen aanslag op je serverload Een plaatje maken van 150 x 30 pixels en er wat tekst inflikkeren is absoluut geen moeite. Bovendien is de module al met php/apache opgestart en is dus al gereed.

Sorry voor mijn traagheid van begrip, zoverre ben ik nog niet met GD bezig geweest , maar als ik het dus goed begrijp kan ik best per bezoeker enkele plaatjes laten genereren? Dat schept heel leuke mogelijkheden!

[Verwijderd]

Verwijderd schreef op zondag 02 januari 2005 @ 23:45:
[...]
3 manieren:
als een een flink grote negatieve text-indent gebruikt heb je geen overflow meer nodig.

niet met de meest gebruikte browsers, maar bijvoorbeeld amaya rendert zo links van de pagina nog een heel stuk extra ruimte om de content te kunnen bevatten.

Mijns inziens is dat ook heel logisch: de viewport rekt op om alle content te bevatten. Meest logisch is dan dat er een horizontale scrollbar verschijnt die dus helemaal rechts staat (zodat je naar links kan scrollen voor het niet zichtbare deel)

Vandaar dus die opmerking dat overflow: hidden dan toch wel nodig is