Photoshop 'smooth' font in HTML

[peaceful_turing]

Ik ben momenteel bezig om voor iemand te slicen.
Ik zet dus met Photoshop gemaakte designs om in html/css.
Het probleem is dat er fonts zijn gebruikt met de font-optie in photoshop: 'smooth'. Dit zorgt er voor dat het lettertype vloeiend word.
Het gebruikte font is Kozuka Gothic Pro B(old), maar in mn index.html kan ik dat lettertype met css niet vloeiend krijgen als in photoshop. Met Cufon en SIFR kan je een lettertype naar javascript omzetten zodat het voor iedereen te zien is, alleen is er nergen een font 'Kozuka Gothic Pro B smooth' te vinden (ook niet in de Photoshop extra font maps).
Ik wil dus graag een maniertje om 'Kozuka Gothic Pro B smooth' in mn HTML bestandje te plaatsen, wat ik nog wél kan aanpassen, dus gewoon als font/code wat iedereen kan lezen, en niet als afbeelding.

Gr. Joachim

[Kvn]

Het lijkt me toch dat als je het met SIFR doet je netjes je font anti-aliased te zien krijgt ;-)

[Yoram]

Ik denk dat dit je wel van pas komt. http://www.sifrgenerator.com/ En verder moet je gewoon zoeken op internet en je computer of je dat font ergens kan vinden.

[Ruud v A]

Dit is een probleem van de browsers, en de manier waarop die fonts renderen. Je zult ook zien dat dit van browser tot browser verschilt. Met Internet Explorer 9, die rendert via DirectWrite ziet het er waarschijnlijk beter uit, en op een brower op Linux of op een Mac waarschijnlijk nog beter, als je het font daar hebt. Verder hangt het ervan af of je font hinting heeft ingebouwd. Sommige fonts zien er namelijk wel vloeiend uit, en sommige niet. Ik ben er nog niet precies uit waardoor dit wordt veroorzaakt, maar ik denk dat het voornamelijk met hinting te maken heeft.

[Bosmonster]

Vergeet ook niet dat je op je Windows computer ClearType aan moet zetten om anti-aliasing op fonts te enablen.

[Leftblank]

Wat je ook niet moet vergeten is dat niemand dat font zal hebben en je het dus in feitte niet 'zomaar' kunt gebruiken in je CSS. Je zult dus als je per se dat font wil gebruiken een van de tooltjes hierboven aangehaald moeten gebruiken, of toch de boel in een image moeten stoppen!

[Anoniem: 299488]

Ruud v A schreef op zaterdag 12 juni 2010 @ 16:27:
Dit is een probleem van de browsers, en de manier waarop die fonts renderen. Je zult ook zien dat dit van browser tot browser verschilt. Met Internet Explorer 9, die rendert via DirectWrite ziet het er waarschijnlijk beter uit, en op een brower op Linux of op een Mac waarschijnlijk nog beter, als je het font daar hebt. Verder hangt het ervan af of je font hinting heeft ingebouwd. Sommige fonts zien er namelijk wel vloeiend uit, en sommige niet. Ik ben er nog niet precies uit waardoor dit wordt veroorzaakt, maar ik denk dat het voornamelijk met hinting te maken heeft.

Internet Explorer 8 bedoel je denk ik?

[xKeito]

Let ook even op de licentie van dat bepaalde font of je het wel in combinatie met SIFR of Cufon mag gebruiken.

[teh_twisted]

killking463 schreef op zaterdag 12 juni 2010 @ 13:49:
Ik ben momenteel bezig om voor iemand te slicen.
Ik zet dus met Photoshop gemaakte designs om in html/css.
Het probleem is dat er fonts zijn gebruikt met de font-optie in photoshop: 'smooth'. Dit zorgt er voor dat het lettertype vloeiend word.
Het gebruikte font is Kozuka Gothic Pro B(old), maar in mn index.html kan ik dat lettertype met css niet vloeiend krijgen als in photoshop. Met Cufon en SIFR kan je een lettertype naar javascript omzetten zodat het voor iedereen te zien is, alleen is er nergen een font 'Kozuka Gothic Pro B smooth' te vinden (ook niet in de Photoshop extra font maps).
Ik wil dus graag een maniertje om 'Kozuka Gothic Pro B smooth' in mn HTML bestandje te plaatsen, wat ik nog wél kan aanpassen, dus gewoon als font/code wat iedereen kan lezen, en niet als afbeelding.

Gr. Joachim

de "smooth" optie is puur voor Photoshop dat ie weet hoe hij de font moet anti-aliasen. Je kan em ook namelijk op "None" zetten.
CSS zelf kan niet smoothen etc da's aan de browser en/of OS overgelaten.

[Bosmonster]

xKeito schreef op zaterdag 12 juni 2010 @ 18:29:
Let ook even op de licentie van dat bepaalde font of je het wel in combinatie met SIFR of Cufon mag gebruiken.

Met Sifr of Cufon verspreid je het font volgens mij niet dus zit je nooit aan licenties gebonden. Dit geldt alleen voor font-embedding.

[ZpAz]

Bosmonster schreef op zaterdag 12 juni 2010 @ 19:25:
[...]


Met Sifr of Cufon verspreid je het font volgens mij niet dus zit je nooit aan licenties gebonden. Dit geldt alleen voor font-embedding.

Beetje vreemd zit dat in elkaar imho, met Cufon bijvoorbeeld maakt hij er 'vector' coordinaten van, wat theoretisch ook wel weer terug te halen is naar een font bestandje. Maar je hebt er een soort 'web-url' only functie bij, dat het betreffende gegenereerde JS enkel werkt op de gegeven url.

[crisp]

ZpAz schreef op zaterdag 12 juni 2010 @ 22:09:
[...]


Beetje vreemd zit dat in elkaar imho, met Cufon bijvoorbeeld maakt hij er 'vector' coordinaten van, wat theoretisch ook wel weer terug te halen is naar een font bestandje. Maar je hebt er een soort 'web-url' only functie bij, dat het betreffende gegenereerde JS enkel werkt op de gegeven url.

Dat laatste is met een beetje javascript-kennis echter eenvoudig te 'kraken'

[Ruud v A]

Anoniem: 299488 schreef op zaterdag 12 juni 2010 @ 18:25:
[...]

Internet Explorer 8 bedoel je denk ik?

Nee, ik bedoel Internet Explorer 9.

@Bosmonster: het zou ook goed kunnen dat ClearType anti-aliasing juist verperst (en ik vermoed dat dit het probleem is). Voor kleine puntgroottes maakt ClearType tekst juist leesbaarder, omdat anti-aliasing op deze grootte alleen maar vage letters oplevert. Maar ik vermoed dat dit juist averechts werkt bij grote puntgroottes (in combinatie met hinting).

[peaceful_turing]

Ik heb nu Regular en Bold font gemixed, ik laat dat 'smooth' maar even achterwege..

Alles is goed bij Firefox, maar niet bij IE 9..

Dit is de code in de index.html

code:

<script src="cufon/cufon-yui.js" type="text/javascript"></script>
<script src="cufon/Kozuka_Gothic_Pro_300-Kozuka_Gothic_Pro_700.font.js" type="text/javascript"></script>
<script src="cufon/cufon-config.js" type="text/javascript"></script> 

<h1>Mode voor een <b>maatje</b> meer!</h1>

Dit is mijn 'cufon-config.js' bestandje:

code:

Cufon.replace('h1', { fontFamily: 'Kozuka Gothic Pro' });

En staat in de style.css:

code:

h1
{font-weight: normal;}

Waarom is dit fout in IE??

[Anoniem: 179067]

Wellicht is het handig om naar "@font-face" te zoeken. Werkt nog niet onder alle browsers (lees: IE) maar is wel voorbereid op de toekomst.

[Ruud v A]

Dat is niet helemaal waar, IE ondersteunt @font-face al sinds versie 5 of 6, eerder dan alle andere browsers. Alleen IE gebruikt het EOT formaat, daar andere browsers TrueType, OpenType of WOFF ondersteunen. Door je font te converteren kun je het in alle browsers werkend krijgen.

[Sebazzz]

Cufon doet het in de Firefox 3.7 Alpha 5 ook niet goed.

[RobIII]

Sebazzz schreef op zondag 13 juni 2010 @ 23:09:
Cufon doet het in de Firefox 3.7 Alpha 5 ook niet goed.
[afbeelding]

Lekker nuttig zoiets te melden van een Alpha release... Dan meld je 't beter bij Mozilla.

[ Voor 5% gewijzigd door RobIII op 13-06-2010 23:58 ]

[Sebazzz]

RobIII schreef op zondag 13 juni 2010 @ 23:57:
[...]

Lekker nuttig zoiets te melden van een Alpha release... Dan meld je 't beter bij Mozilla.

Ook goeiemorgen. Het leek me wel nuttig om het te melden, Gecko en Trident zijn beide behoorlijk verbouwd en het kan dus zijn dat het in combinatie met bepaalde doctypes faalt, en misschien is dat niet per se een bug.

[DNA_Saint]

Anoniem: 179067 schreef op zondag 13 juni 2010 @ 15:33:
Wellicht is het handig om naar "@font-face" te zoeken. Werkt nog niet onder alle browsers (lees: IE) maar is wel voorbereid op de toekomst.

TS vroeg "smooth". En met @font-face krijg je geen "smooth".

Beste oplossing is sIFR of Cufon.

[pieturp]

Of gewoon een (background) plaatje

[peaceful_turing]

Ruud v A schreef op zondag 13 juni 2010 @ 21:46:
Dat is niet helemaal waar, IE ondersteunt @font-face al sinds versie 5 of 6, eerder dan alle andere browsers. Alleen IE gebruikt het EOT formaat, daar andere browsers TrueType, OpenType of WOFF ondersteunen. Door je font te converteren kun je het in alle browsers werkend krijgen.

Ja maar ik heb Cufon gebruikt, en het is nu een Javascript bestandje.. het is geen tt, ot ,of woff..

[mcDavid]

DNA_Saint schreef op maandag 14 juni 2010 @ 16:04:
[...]

TS vroeg "smooth". En met @font-face krijg je geen "smooth".

Beste oplossing is sIFR of Cufon.

Met @font-face krijg je gewoon wat de gebruiker het liefste ziet. Dat lijkt me toch in alle gevallen de beste oplossing?

[peaceful_turing]

Ik heb het nog steeds niet voor elkaar, dat van Cufon in IE..

[MueR]

Dat is vervelend. En nu?

[kwaakvaak_v2]

Bosmonster schreef op zaterdag 12 juni 2010 @ 19:25:
[...]


Met Sifr of Cufon verspreid je het font volgens mij niet dus zit je nooit aan licenties gebonden. Dit geldt alleen voor font-embedding.

Dat doe je in principe wel, want het font zit als vector in je SWF bestand.

[amahusu]

wat doet iedereen moeilijk met Sifr en Cufon?

vrijwel alle moderne browsers ondersteunen font embedment, als je het crossbrowser wilt laten werken hoef je de ttf alleen maar ff om te zetten naar eot.

en er is een handige generator/converter die ook nog eens kant en klare css voor je neerplempt:

http://www.kirsle.net/wizards/ttf2eot.cgi

edit: wat ruud zegt dus

[ Voor 4% gewijzigd door amahusu op 20-06-2010 15:28 ]

[R4gnax]

amahusu schreef op zondag 20 juni 2010 @ 15:26:

en er is een handige generator/converter die ook nog eens kant en klare css voor je neerplempt:

http://www.kirsle.net/wizards/ttf2eot.cgi

Dan werkt FontSquirrel toch wat beter: subsetting, outline simplificatie, verwijderen van kerning, etc. En alle benodigde formaten ineens: ttf/otf, woff, svg, eot en als je echt wilt: een Cufón javascript resource.

Verder is er recent een 'web only' optie toegevoegd die een ttf/otf font file ombouwt zodat deze niet meer te installeren en gebruiken is op Win/Mac desktops. Dat plaatst @font-face in hetzelfde 'grijze gebied' als sIFR en Cufón...

[crisp]

@font-face heeft nogal wat nadelen naast het feit dat de rendering in sommige browsers nogal te wensen over laat...

[R4gnax]

crisp schreef op dinsdag 22 juni 2010 @ 00:46:
@font-face heeft nogal wat nadelen naast het feit dat de rendering in sommige browsers nogal te wensen over laat...

De 'flash of unstyled text', afhandeling van 404 errors en het blokkeren van rendering?

Dat eerste heb je met sIFR of Cufón net zo goed last van. De laatste is een non-issue als je gewoon je pagina's zo inricht dat IE er geen last van heeft. (Alsof je werkelijk je lijstje script includes en stylesheet includes gaat mixen zodat er een script tag voor de css-include met de @font-face regel komt...)

Resteert de middelste: de error afhandeling. Dat kan inderdaad een probleem zijn. Maar wees eens eerlijk: wat er beschreven wordt is een extreem pessimistich geval, niet waar?

[Bosmonster]

Met name de belabberde rendering van text met font-face vind ik een nadeel (met name IE)

Er blijft vooralsnog niet echt een goed alternatief, behalve gewoon geen custom fonts gebruiken voor dynamische tekst. En daarmee verleggen we het probleem mooi naar de webdesigners