Thread: Afbeeldingen vs lettertype
-
16-08-2011, 13:41 #1
Afbeeldingen vs lettertype
Hallo,
Jullie herinneren me misschien van deze thread:
http://www.9lives.be/forum/webdesign...-de-tabel.html
Hier ben ik weer, met mijn lijpe website.
Hij is in ieder geval al verbeterd (ik gebruik nu DIV tags ipv een tabel
)
Mijn volgende zorg is deze: ik gebruik nu afbeeldingen voor de navigatie (eigenlijk achtergrondafbeeldingen, en de tekst staat op transparant). Ik heb deze techniek ergens op een tutorial geleerd. Ze gebruikten sprites omdat er 3 verschillende statussen waren: gewoon, onderstreept en doorstreept. Ik heb gewoon een lichte en een donkere status.
Is het niet beter dat ik gewoon het lettertype integreer ipv de sprites? Zo beperk ik de downloadtijd misschien.
Of hebben jullie redenen om het lettertype NIET te integrerern?
Het letterype heet trouwens 'Sketch Block'.
Bij voorbaat dankno votes
-
-
16-08-2011, 14:14 #2Approved 9-lifer
- Registered
- 10/10/03
- Location
- Gent
- Posts
- 5,535
- iTrader
- 25 (96%)
- Mentioned
- 0 Post(s)
- Reputation
- 7/20
Wat regelmatig gebruikt wordt is text-indent.
Dan zit je niet meer met het 'probleem' dat je de onzichtbare tekst kan selecteren.Code:<ul> <li><a href="">Tekst</a></li> <li><a href="">Tekst</a></li> </ul> met ul li a { text-indent: -9999px; }
Ik zou sowieso afbeeldingen gebruiken, met dat lettertype ga je het toch nooit goed krijgen, tenzij je de webfont versie hebt en dan met veel gepruts.Als ik dit niet heb ben ik geen approved 9-lifer.no votes
-
16-08-2011, 14:20 #3Approved 9liver
- Registered
- 29/10/03
- Location
- Izegem
- Posts
- 4,748
- iTrader
- 25 (100%)
- Mentioned
- 0 Post(s)
- Reputation
- 6/9
De techniek die je nu gebruikt is image replacement, alleen niet helemaal op de correcte manier. Uw tekst mag je niet transparant zetten, omdat zoekmachines je daarvoor kunnen afstraffen. Je gebruikt beter position:absolute en margin-top:-10000px op je tekst, maar wat nog beter is, is inderdaad gebruik maken van font-embedding.
Maar daarover zijn hier al discussies geweest, zoek eens @font-faceno votes
-
16-08-2011, 15:24 #4
Ik dacht dat ik een video had gezien waar Matt Cutts zei dat het <img src='whatevs' alt='Hier komt je tekst' /> de enige 'correcte' manier was.
Edit:
Ik heb het over image replacement. Tekst omzetten naar een afbeelding zou ik enkel gebruiken als het echt niet anders kan.no votes
-
16-08-2011, 15:35 #5Approved 9liver
- Registered
- 29/10/03
- Location
- Izegem
- Posts
- 4,748
- iTrader
- 25 (100%)
- Mentioned
- 0 Post(s)
- Reputation
- 6/9
no votes
-
16-08-2011, 16:49 #6
^ Er is daar nog al wat rond te doen eigenlijk, google zelf zegt dat het niet meteen fout is je tekst buiten het beeld schuiven maar het is mogelijk dat als dit te veel word gedaan of er dubieuze tekst achterzit dat google het gaat zien als spam.
Dus opzich is er niet meteen iets mis mee.My fight towards financial independence: Fight to FI/REno votes
-
16-08-2011, 16:54 #7Member
- Registered
- 06/06/04
- Location
- Bilzen
- Posts
- 8,805
- iTrader
- 18 (100%)
- Mentioned
- 0 Post(s)
- Reputation
- 42/128
Ik heb die uitspraak toch even opgezocht omdat ik het maar vreemd zou vinden en kwam alleszins op veel discussie uit als gevolg ervan.

Via Google Webmaster Central dan uitgekomen op een reply van een andere Google werknemer waar ge wel uit moogt afleiden dat ge het wel moogt doen, zolang ge u aan de regels houdt. Tekst gebruiken die de afbeelding effectief beschrijft, of de tekst op de afbeelding volledig overnemen. Geen extra keywordstuffing gaan doen natuurlijk.
Using CSS to hide text - Crawling, indexing, and ranking | Google Groups
Ook nog interessant: mezzoblue ยง Image Replacement + Google
Ge moet altijd rekening houden met het verschil tussen inline images en background images waarbij image replacement gewoon onvermijdelijk is.
Het grote probleem is dat ge op Google vaak oudere artikels vindt, soms ook zonder datum, en dus niet weet wie wat eerst beweerd heeft en wat de current situation is.
--
En GregoryCo, het op "display: none;" zetten van tekst dat wordt afgeraden is niet alleen omwille van zoekmachines, maar vooral voor screenreaders. Die negeren doorgaans elementen die in css verborgen worden waardoor de accessibility van een site volledig teniet wordt gedaan.
--
Soit, om dan ook even ontopic te reageren.
Image replacement techniques om het beperkt aantal webfonts te gebruiken worden al jaar en dag toegepast. Maar na enkele jaren alternatieve technieken te hebben gebruikt is @font-face nu toch wel klaar voor prime time en zou ik het sowieso gebruiken.
Maar sowieso altijd controleren op crossbrowser support.no votes
-
16-08-2011, 17:17 #8
Dit is mijn code:
Het werkt overal goed, behalve:HTML Code:font-family: 'SketchBlockBold'; src: url('sketch_block-webfont.eot'); src: url('sketch_block-webfont.eot?#iefix') format('embedded-opentype'), url('sketch_block-webfont.woff') format('woff'), url('sketch_block-webfont.ttf') format('truetype'), url('sketch_block-webfont.svg#SketchBlockBold') format('svg');
- Google Chrome weergeeft niets.
- Safari weergeeft het lettertype in een slechte kwaliteit.
Die code heb ik gegenereerd op deze website: Font Squirrel | Create Your Own @font-face Kits
Misschien is de kwaliteit van de font-bestanden niet goed?no votes
-
16-08-2011, 21:10 #9Approved 9liver
- Registered
- 29/10/03
- Location
- Izegem
- Posts
- 4,748
- iTrader
- 25 (100%)
- Mentioned
- 0 Post(s)
- Reputation
- 6/9
Kan wel eens gebeuren dan het font er een beetje anders uitziet in andere browsers.
no votes
-
16-08-2011, 21:41 #10
Sommige fonts zijn niet specifiek gemaakt voor het web waardoor het er soms niet optimaal uit ziet. Heb dit zelf ook voor gehad met een website.
Er zijn genoeg topics op het internet hierover, chrome (en safari) hebben AA maar passen het anders toe waardoor het er ruwer uitziet, terwijl het er bij Fx en IE9 beter uitziet.
't Is gewoon een kwestie van font rendering. Sommige fonts hebben hier last van en sommige niet.Last edited by coldvinc; 16-08-2011 at 21:47.
My fight towards financial independence: Fight to FI/REno votes
-
31-08-2011, 23:27 #11
Uiteindelijk bleek het te maken hebben met de rotatie van de tekst.
Ik heb dit stukje aan de code toegevoegd:
-webkit-transform-style: preserve-3d;
Enkel in IE is de tekst niet geroteerd, maar dat geeft niet. Zo lang de tekst maar weergeven word.no votes

