Cufón :IE7 -> Cursor style op link element

[Tobiaz]

Ik gebruik Cufón voor fontreplacement op een projectwebsite. Ik pas het toe op wat titeltjes/kopjes. Niks bijzonders. Sommige replaced elements zijn echter ook linkjes. Ik kwam er achter dat in IE (eigenlijk alle versies) de pointer cursor alleen zichtbaar is als je ook daadwerkelijk op een lijn in de letter bent. Anders toont hij de text-selectie cursor.

Cufon maakt zn eigen <span> aan met daarin de tekst</span> In overige browser heb ik gewoon over de hele span een pointer cursor.

Ik heb al geprobeerd de cufon cufon-canvas style te overrulen/aan te vullen met cursor:pointer maar die vlieger gaat niet op. Heeft iemand ervaring met die probleem of weet iemand een oplossing?

[MoietyMe]

Waarom gebruik je niet gewoon CSS voor dit probleem?

Cascading Stylesheet:

@font-face {
    font-family:Fontnaam;
    src:url(../fonts/font.ttf);
}

Met een conditional comment even de .eot voeren aan IE en je bent klaar.

Werkt prima.

[Kiphaas7]

omdat @font-face niet zo breed wordt ondersteund als cufon? Overigens help je de TS niet echt met zijn probleem....

"Mijn biefstuk is te rauw"
"Probeert u onze kip eens"



@TS: Op een of andere manier wordt je css declaratie van je cursor overruled door een inline style of een default style die IE toepast... Helaas zonder online testcase wordt het (in ieder geval voor mij) lastig om je te helpen.

[_Thanatos_]

Het is meer zoiets:

"Mijn biefstuk is te rauw"
"Zo hoort biefstuk, deal with it."

Cufón en typeface.js zijn dan ook workarounds voor tekortkomingen in de browsers, en geenszins oplossingen. Wel leuke technieken, tho. Misschien dat dit werkt:

Cascading Stylesheet:

canvas { cursor: pointer; }

Als dat werkt, kun je dat aanpassen tot het alleen je links de juiste cursor geeft. Ik denk dat je het anders maar gewoon moet nemen voor wat het is, want zoals ik al zei: het is een workaround en geen oplossing.

Overigens heeft Good Fella wel degelijk gelijk, met 1 kleine toevoeging van mij: gebruik de CSS3-methode (of de MS-implementatie) op browsers die dat ondersteunen. Dan heb je geen (redelijk lomp) script nodig, is je pagina wat sneller, en kun je in theorie alles doen wat je normaal ook kan doen. Voor browsers die font-face niet snappen (welke eigenlijk??) dan Cufón of typeface.js gebruiken.

[ Voor 27% gewijzigd door _Thanatos_ op 11-09-2009 13:31 ]

[MoietyMe]

@kiphaas7: het is wel degelijk een oplossing. Want dan is het gewoon tekst en kun je er mee doen wat je wilt.

@font-face wordt overigens ondersteunt door de volgende browsers:

Internet Explorer 4+
Firefox 3.5+
Safari 3+ (2 weet ik niet zeker)
Opera 10+

Er van uit gaand dat de mensen die iets anders gebruiken dan IE vrij snel updaten is het vrij veilig om te gebruiken. Je moet natuurlijk wel een backup font declareren.

De @font-face methode scheelt een hele berg code en scripts die je eigenlijk liever niet gebruikt.

[Tobiaz]

_Thanatos_ schreef op vrijdag 11 september 2009 @ 13:28:
Het is meer zoiets:

"Mijn biefstuk is te rauw"
"Zo hoort biefstuk, deal with it."

Cufón en typeface.js zijn dan ook workarounds voor tekortkomingen in de browsers, en geenszins oplossingen. Wel leuke technieken, tho. Misschien dat dit werkt:

Cascading Stylesheet:

canvas { cursor: pointer; }

Als dat werkt, kun je dat aanpassen tot het alleen je links de juiste cursor geeft. Ik denk dat je het anders maar gewoon moet nemen voor wat het is, want zoals ik al zei: het is een workaround en geen oplossing.

Overigens heeft Good Fella wel degelijk gelijk, met 1 kleine toevoeging van mij: gebruik de CSS3-methode (of de MS-implementatie) op browsers die dat ondersteunen. Dan heb je geen (redelijk lomp) script nodig, is je pagina wat sneller, en kun je in theorie alles doen wat je normaal ook kan doen. Voor browsers die font-face niet snappen (welke eigenlijk??) dan Cufón of typeface.js gebruiken.

@font-face wordt overigens ondersteunt door de volgende browsers:

Internet Explorer 4+
Firefox 3.5+
Safari 3+ (2 weet ik niet zeker)
Opera 10+

Er van uit gaand dat de mensen die iets anders gebruiken dan IE vrij snel updaten is het vrij veilig om te gebruiken. Je moet natuurlijk wel een backup font declareren.

De @font-face methode scheelt een hele berg code en scripts die je eigenlijk liever niet gebruikt.

Ik ben ook helemaal niet blij met cufon of sifr of welke vorm van fontreplacement dan ook. Het feit alleen is dat ik er niet onderuit kom. De suggestie die je oppert werkt helaas niet. @font-face gebruiken is simpelweg geen optie vanwege de copyright issues die daar aanvast kleven. Al moet ik eerlijk bekennen dat ik niet precies weet of ik met cufon wel helemaal safe zit. Ik ga me opmaken voor een gesprekje over techniek, en afwegingen in grafische vormgeving met de art-director... tenzij iemand nog met een oplossing kan komen, thanks voor de reacties so far.

[ Voor 74% gewijzigd door Tobiaz op 11-09-2009 14:09 ]

[MoietyMe]

Voor IE zit je qua rechten goed, want dan wordt het font opgeslagen in een .eot-file. Bij de rest moet je inderdaad een licentie hebben. Bij Cufon en sIFR zit je volgens mij ook vrij safe.

[ZpAz]

Ik ben ook helemaal niet blij met cufon of sifr of welke vorm van fontreplacement dan ook. Het feit alleen is dat ik er niet onderuit kom. De suggestie die je oppert werkt helaas niet. @font-face gebruiken is simpelweg geen optie vanwege de copyright issues die daar aanvast kleven.

Als je een font licentietechnisch niet via font-face mag gebruiken, mag je deze ook niet gebruiken via een methode als sIFR of Cufon lijkt me?

[H004]

Verschil is dat bij font-face je de font ook daadwerkelijk verspreidt. Bij sIFR wordt er alleen een flashbestandje met daarin wat ingebakken letters verstuurd naar de client. Als je de licentie op een font hebt gekocht mag je hem in principe gebruiken met sIFR, maar niet verspreiden over x bezoekers van je website.

[Kiphaas7]

Het is een oplossing voor het originele probleem: een niet standaard font gebruiken. De TS vroeg echter om een oplossing voor zijn cursor probleem met cufon. Dus niet een alternatief voor cufon. Ik ben het overigens met je eens dat @font-face idealer is....

Het feit is echter dat cufon bestaansrecht heeft, en dus een goede oplossing is voor het originele probleem. Ondertussen zijn er veel reacties, maar bar weinig reacties over het oplossen van zijn cursor probleem.

Good Fella schreef op vrijdag 11 september 2009 @ 13:50:
@kiphaas7: het is wel degelijk een oplossing. Want dan is het gewoon tekst en kun je er mee doen wat je wilt.

@font-face wordt overigens ondersteunt door de volgende browsers:

Internet Explorer 4+
Firefox 3.5+
Safari 3+ (2 weet ik niet zeker)
Opera 10+

Er van uit gaand dat de mensen die iets anders gebruiken dan IE vrij snel updaten is het vrij veilig om te gebruiken. Je moet natuurlijk wel een backup font declareren.

De @font-face methode scheelt een hele berg code en scripts die je eigenlijk liever niet gebruikt.

Opera 10 is pas net uit, opera 9 vindt het dus niet leuk. Firefox 2 en 3.0 vinden het ook niet leuk. Neem daarbij de copyright issues met fonts, en als je een zo breed mogelijk ondersteuning wil hebben EN perse je custom font gebruiken, dan is @font-face niet de beste oplossing.

[Fuzzillogic]

Er zijn behoorlijk wat open source / CC-fonts te vinden. Veel kaf tussen het koren, dus je zult moeten gaan zoeken, maar het voorkomt licentiegedoe.

Dat Opera 9 en oudere firefoxen het "niet leuk" vinden is imo een non-issue. Opera heeft (helaas) een klein marktaandeel, maar de gebruikers zullen, net als bij firefox, veel eerder geneigd zijn om een actuele versie te installeren.

Bovendien is de fall-back ook bijzonder pijnloos: het is niet dat zonder directe font-face-support de site opeens onbruikbaar is; alles is nog steeds leesbaar, alleen in een ander font. Nou. Tjonge.

Daarnaast: sifr, cufon, typeface etc heb ik in m'n blocked content lijst staan. Vervelende scripts zijn het, die dikwijls normaal gebruik (copy/paste enzo) ook nog bemoeilijken.

[Tom]

Fuzzillogic schreef op vrijdag 11 september 2009 @ 17:09:
Er zijn behoorlijk wat open source / CC-fonts te vinden. Veel kaf tussen het koren, dus je zult moeten gaan zoeken, maar het voorkomt licentiegedoe.

Bij corporate websites ligt het font vaak al vast in een huisstijl, dus dan kun je daar al niet vanaf wijken.

[Fuzzillogic]

Tom schreef op vrijdag 11 september 2009 @ 17:56:
[...]

Bij corporate websites ligt het font vaak al vast in een huisstijl, dus dan kun je daar al niet vanaf wijken.

True. Maar dan is er wellicht wel weer wat budget om een licentie voor het "verspreiden" van het font te regelen. En ik kan me ook voorstellen dat je fonts kunt strippen van zaken (varianten, characters) die je op de site in kwestie toch niet gebruikt: zo hoef je dus geen volledig font aan te bieden.

[imp4ct]

H004 schreef op vrijdag 11 september 2009 @ 16:43:
Verschil is dat bij font-face je de font ook daadwerkelijk verspreidt. Bij sIFR wordt er alleen een flashbestandje met daarin wat ingebakken letters verstuurd naar de client. Als je de licentie op een font hebt gekocht mag je hem in principe gebruiken met sIFR, maar niet verspreiden over x bezoekers van je website.

Erm, is ook een beetje zever eh. Als je Cufon of FLIR gebruikt moeten de fonts ook online staan. 't Is niet echt dan niet zo moeilijk om het mapje te vinden waar deze dan instaan. Dus jah.. copyright enz.. Ik heb nog nooit geweten dat een bedrijf hiervoor een proces wordt aangedaan hoor

En "@font-face" is echt op dit moment nog lang niet de oplossing, dit is CSS 3 stuff en dat wordt nog steeds niet fatsoenlijk ondersteunt door de huidige browsers, want moest het wel zo zijn dan zouden alle sites het gewoon gebruiken.

[ Voor 14% gewijzigd door imp4ct op 12-09-2009 01:06 ]

[Kiphaas7]

imp4ct schreef op zaterdag 12 september 2009 @ 01:00:
[...]Erm, is ook een beetje zever eh. Als je Cufon of FLIR gebruikt moeten de fonts ook online staan. 't Is niet echt dan niet zo moeilijk om het mapje te vinden waar deze dan instaan. Dus jah.. copyright enz.. Ik heb nog nooit geweten dat een bedrijf hiervoor een proces wordt aangedaan hoor

De fonts staan dan niet in (bijvoorbeeld) .ttf formaat online.

imp4ct schreef op zaterdag 12 september 2009 @ 01:00:
En "@font-face" is echt op dit moment nog lang niet de oplossing, dit is CSS 3 stuff en dat wordt nog steeds niet fatsoenlijk ondersteunt door de huidige browsers, want moest het wel zo zijn dan zouden alle sites het gewoon gebruiken.

Dat op zich is een drogredening, en ook nog niet eens helemaal waar (het zat volgens mij in CSS2, om in 2.1 weer verwijdert te worden. Daarnaast had IE4 en hoger het al....). Als je even dit topic nakijkt zie je dat het wel degelijk vrij breed wordt ondersteund, maar inderdaad niet zo breed als de sifr en cufon.

[ Voor 6% gewijzigd door Kiphaas7 op 12-09-2009 04:17 ]

[H004]

imp4ct schreef op zaterdag 12 september 2009 @ 01:00:
[...]


Erm, is ook een beetje zever eh. Als je Cufon of FLIR gebruikt moeten de fonts ook online staan. 't Is niet echt dan niet zo moeilijk om het mapje te vinden waar deze dan instaan. Dus jah.. copyright enz.. Ik heb nog nooit geweten dat een bedrijf hiervoor een proces wordt aangedaan hoor

Onzin, bij sIFR moet je de een swf extracten en zelf een font-bestand samenstellen. Bij FLIR wordt er naar mijn weten alleen via php verwezen naar het font-bestand. In de client is in principe niet te zien welk font wordt gebruikt, en in welke directory dit bestand staat. Dat is héél iets anders dan een directe link in een css-bestand! Hoe de situatie precies is bij Cufon weet ik niet (niet mee gewerkt).

Dus jah.. copyright enz.. Ik heb nog nooit geweten dat een bedrijf hiervoor een proces wordt aangedaan hoor

Oh, dus is het niet nodig om er rekening mee te houden? Ik heb nog nooit gehoord dat er mensen vermoord zijn met een fietsbel. Dus zal het wel geen probleem zijn...

[imp4ct]

H004 schreef op zaterdag 12 september 2009 @ 13:39:
Oh, dus is het niet nodig om er rekening mee te houden? Ik heb nog nooit gehoord dat er mensen vermoord zijn met een fietsbel. Dus zal het wel geen probleem zijn...

Wat een kinderachtige uitspraak

[imp4ct]

Kiphaas7 schreef op zaterdag 12 september 2009 @ 04:14:
Dat op zich is een drogredening, en ook nog niet eens helemaal waar (het zat volgens mij in CSS2, om in 2.1 weer verwijdert te worden. Daarnaast had IE4 en hoger het al....). Als je even dit topic nakijkt zie je dat het wel degelijk vrij breed wordt ondersteund, maar inderdaad niet zo breed als de sifr en cufon.

In 2007 heeft "A List Apart" er al een artikel over geschreven en het is nog steeds geen standaard.. dus jah zegt dat niet genoeg?

Link: http://www.alistapart.com/articles/cssatten

't Feit is dat je als webdeveloper hier geen oplossing aan hebt, want het werkt niet overal en je klanten eisen nu eenmaal dat hun website in elke browser goed getoond word. Dus als @font-face echt zou nuttig zijn, dan bestonden sIFR, FLIR en Cufon niet.

[Fuzzillogic]

imp4ct schreef op zaterdag 12 september 2009 @ 14:58:
[...]
't Feit is dat je als webdeveloper hier geen oplossing aan hebt, want het werkt niet overal en je klanten eisen nu eenmaal dat hun website in elke browser goed getoond word. Dus als @font-face echt zou nuttig zijn, dan bestonden sIFR, FLIR en Cufon niet.

font-face-support is iets nieuws, dat pas (weer) in recentere browsers is teruggekomen. Maar zoals ik al zei zullen veel mensen van niet-IE-browsers hun browser wel gewoon actualiseren. Dus de marktpenetratie van die feature is wellicht al hoog. Combineer dat met de prima fall-back optie en het voordeel van al die scriptjes is m.i. nog maar bijzonder klein.

Daarnaast blijf ik het opvallend vinden hoe webdevvers vasthouden aan oude techniek. Naar hun eigen zeggen omdat de klanten dat eisen, maar ik durf te stellen dat het de klanten juist aangepraat is! Zijn webdevvers nou zo bang om nieuwe techniek te gebruiken? Zijn ze te lui om iets nieuws te leren? Waarom kijken ze alleen maar naar het verleden, en nooit de het browserlandschap dat er over een jaar zal zijn?

Dat laatste lijkt me hier zeker ook van toepassing: er is dus een nieuwe techniek beschikbaar, font-face, die de wens, namelijk custom fonts gebruiken in websites, gewoon oplost zoals het hoort ipv ranzige work-arounds en hacks. Misschien dat niet alle huidige browsers daarmee om kunnen gaan, maar dat maakt niet uit, want er is graceful degradation. Maar deze browsers zullen in de nabije toekomst toch worden vervangen door hun moderne variant, die wél support heeft voor de nieuwe techniek. Dus waarom dan nu ontwikkelen met archaïsche, lompe, onhandige en smerige oplossingen?

[MoietyMe]

Ben het helemaal eens met Fuzzillogic. @font-face is een prima techniek die doet wat het moet doen. Als we eeuwig stil blijven staan komen we als webdevvers nergens.

En als je dan toch zo nodig alles lager dan FF3.5, Opera 10 en Chrome wilt ondersteunen dan is dit misschien een oplossing voor je: http://kilianvalkhof.com/...ning-cufon-and-font-face/

En voor het grootste gedeelte van je bezoekers zal het gewoon werken. Zoals al eerder gezegd wordt het gewoon ondersteunt door IE4+ Als ik naar de statistieken kijk van een aantal vrij grote websites heb je dan 80% van je bezoekers al gehad.

[Tobiaz]

Leuke discussie mensen! Ben het ook eens met Fuzzilogic maarrrr, in de praktijk werkt het soms net iets anders. Je kunt het geloven, je kunt het ook niet doen maar als een klant op het werk in IE6 rondsurft, en jaaa die zijn er nog zat. Dan kun je niet aan komen met het verhaal: 'de rest van de wereld is verder....' dan moet je geoon die site voor IE6 volgens hun huisstijl maken. En gracefulldegradation? Dat lijkt me dan zeker geen optie huistijl/stijlpolitie technisch gesproken.

dit is echter mijn ervaring.

[MoietyMe]

Gelukkig ondersteunt IE6 @font-face.

[imp4ct]

Laat me duidelijk stellen dat ik totaal niet tegen @font-face bent. Ik zou niets liever willen dan dat het door elke browser fatsoenlijk werd ondersteund, 't feit is dat dit nog niet het geval is. En daarom dus Cufon, sIFR of FLIR.

[MoietyMe]

Maar dat is een dusdanig klein percentage dat het een beetje overbodig is. En anders: http://kilianvalkhof.com/...ning-cufon-and-font-face/