[CSS] Font size gelijk houden cross OS

[Arcane Apex]

Ik heb een text waarvan de size door de volgende CSS code bepaald wordt:

code:

.standardText
{
color: #333333;
font-family: arial;
font-size: 13px;
}

Dit werkt goed onder Windows en alle browsers onder Windows en ook op browsershots.org lijkt alles correct. Echter wanneer ik Ubuntu(7.10) start en de text dan in Firefox 2.0.0.10 bekijk is de text veel groter. Dit terwijl browsershots dit niet aangaf.(Onder dezelfde resolutie, zelfde OS, zelfde browser)
Ik dacht, misschien ligt het dan aan mijn instellingen of PC, maar iemand die ook Ubuntu(7.10) geinstalleerd heeft staan ziet de font size van de text ook veel groter op zijn PC in Firefox op dezelfde resolutie.
Heeft iemand enig idee wat hier de oorzaak van kan zijn? En hoe men dan de font size in CSS kan vaststellen met een zo groot mogelijke cross-OS en cross-browser compatibility?

PS: Ik snap ook niet hoe het kan dat browsershots.org het wel goed displayed op hetzelfde OS met dezelfde Firefox browser en onze PC's niet.

[Verwijderd]

Interessante vraag.

Als je googled op 'css hacks' dan vind je wel veel browser detection achtige dingen.
Ik ben benieuwd naar de oplossing voor een cross-OS css, maar ik zou mezelf ook even de vraag stellen:

"Welk publiek wil ik met deze website bereiken? en welk deel van deze doelgroep gebruikt Ubuntu?"

of te wel hoe relevant is het?

[Arcane Apex]

Ik test op Ubuntu, omdat een groot deel van onze doelgroep developers zijn welke veel Linux draaien.

[Brent]

Je geeft expliciet het lettertype Arial aan. Deze is niet standaard aanwezig in Linux dus zal er een vervangend lettertype gebruikt worden. Beste is dus om een letter te kiezen die overal standaard aanwezig is. Verdana en Bitstream Sans lijken erg op elkaar (de laatste is iets breder, maarja, kiezen of delen), dus dan geef je die twee op in je CSS.

[Verwijderd]

Arcane Apex schreef op vrijdag 30 november 2007 @ 08:51:
Ik test op Ubuntu, omdat een groot deel van onze doelgroep developers zijn welke veel Linux draaien.

In dat geval is het inderdaad belangrijk om te zorgen dat het er goed uit ziet in ubuntu.

Je ziet soms gewoon veel mensen die dingen honderd procent perfect willen hebben in de meest uiteenlopende browers, die eigenlijk niemand gebruikt. Maar dat is niet het geval, succes er mee!

[beetle71]

Wellicht niet helemaal interessant/ van toepassing voor jou probleem, maar er staat een heel interessant artikel over css en font-sizes op Alistapart.

Weet je overigens zeker dat je in je ubuntu/firefox niet per ongeluk je browser 'text-size' op 'groter' staat ( ctrl+ en ctrl- )?

[Verwijderd]

Er kunnen meerdere varianten van "arial" in omloop zijn. Zo kan ik niet de MS-TTF's hebben geïnstalleerd, maar een eigen lettertype met de naam "arial".

Over de weergave van webpagina's heb je weinig controle. Bekijk je website op een aantal standaard platformen (Mac OS, MSIE, Ubuntu). Ziet het er goed uit, prima. Maar richt je niet op pixel-perfect rendering, want dan gaat in de meeste gevallen niet lukken.

[Verwijderd]

Ik vind dit artikel over tesktopmaak met em's wel erg nuttig. Ik vind het goed werken en je behoudt de mogelijkheid om in IE de tekst te vergroten als je daar zin in hebt. Er zijn trouwens wel meer artikelen over dit onderwerp, maar dit is het eerste die ik in de gauwigheid vond.

Misschien lost dit je probleem op.

Over verschillende fonts op verschillende OS-sen: ik denk dat het het best is om in je font-volgorde in css van specifiek naar minder specifiek te gaan: dus eerst Linux- en Mac-specifieke fonts op te geven en dan pas de Windows-fonts. Op mijn Mac staan eigenlijk wel alle Windows-fonts geïnstalleerd, dus als ik Safari een mooi Mac-font wil laten weergeven, dan moet dat vooraan staan. Hetzelfde kan gelden voor jouw probleem.

offtopic:
Overigens heb ik gehoord dat Windows Helvetica (als hij geen font met die naam heeft) te allen tijde afbeeldt als Arial, in plaats van het te negeren en te kijken of hij het volgende font wel heeft. Dus dat

Cascading Stylesheet:

font-family:helvetica,verdana,sans-serif

in IE Arial oplevert. (Nu heb ik een gruwelijke hekel aan Arial, dus ik ben zo ver gegaan om Helvetica niet meer te gebruiken.)

Weet iemand of dit (nog steeds) klopt?

[ Voor 4% gewijzigd door Verwijderd op 30-11-2007 13:58 ]

[Arcane Apex]

Ok ik heb het geprobeerd en vermoed dat het inderdaad te maken heeft met dat Arial niet standaard op
Linux distros geinstalleerd staat en dus terugvalt op een ander (groter) font. Dus heb ik verdana geprobeerd, maar ook dan wordt er teruggevallen op een ander font....iig het font op Ubuntu lijkt in de browser anders dan op Windows. (Zoals het verschil tussen Arial en Times New Roman)
Bestaat er wel een font naast courier of courier new die op bijna alle grote OS'en standaard geinstalleerd staat?

[Verwijderd]

Misschien helpt deze link voor die vraag: http://mondaybynoon.com/2...to-popular-web-typefaces/

[T-MOB]

Nimbus sans lijkt uit mijn hoofd het meest op Arial. En nimbus heb ik iig standaard op Debian. De volgende rij zou dan aardig safe zijn voor Arial:

Cascading Stylesheet:

font-family:arial,"nimbus sans","helvetica neue",sans-serif

[Arcane Apex]

Stel dat arial niet geinstalleerd staat op een OS en er inderdaad teruggevallen moet worden op een ander font dat je hebt vastgesteld in de CSS file, maar dat dat font op dezelfde pixelgrootte eigenlijk
er groter uitziet dan arial, kan je dan niet een aparte pixelgrootte vaststellen in de css file per gekozen font?

Om een voorbeeld te noemen arial is op 12px kleiner dan verdana. Dus wanneer er op verdana teruggevallen wordt dan is de grootte weer anders.

[T-MOB]

Nee, je kunt niet per lettetype een andere grootte instellen. De kunst is dus om een rijtje alternatieven neer te zetten met letterypen die wel ongeveer dezelfde dimensies hebben.

[Arcane Apex]

Jammer, want dit was wel handig geweest:

code:

font-family: arial 14px,verdana 12px,"nimbus sans" 13px,"helvetica neue" 11px;

Misschien iets om in CSS4 te implementeren.

[Verwijderd]

Je kan even kijken hoe tweakers.net het doet:

code:

font-family:arial,helvetica,"liberation sans","dejavu sans condensed",sans-serif;

Liberation Sans/Serif/Mono zijn de door Red Hat gemaakte fonts die qua grootte Arial en Times precies nabootsen. DejaVu Sans/Serif/Mono zijn (op Ubuntu tenminste) de standaard fonts van Linux. Blijkbaar past de condensed-variant het best bij Arial.

[Kiphaas7]

http://developer.yahoo.com/yui/fonts/

Nog niet genoemd, en ik vind het wel handig.

[Arcane Apex]

Wat is overigens het verschil tussen:

code:

font-family: sans-serif;

/* en */

font-family: arial,sans-serif;

Wordt in beide gevallen niet arial gebruikt op Windows? En wat houdt dat verschil in voor Mac en Linux?
(sans-serif is toch geen font op zich, maar een type font of?)

[ Voor 11% gewijzigd door Arcane Apex op 03-12-2007 11:36 ]

[RM-rf]

Arcane Apex schreef op maandag 03 december 2007 @ 11:34:
Wat is overigens het verschil tussen:

code:

font-family: sans-serif;

/* en */

font-family: arial,sans-serif;

Wordt in beide gevallen niet arial gebruikt op Windows? En wat houdt dat verschil in voor Mac en Linux?
(sans-serif is toch geen font op zich, maar een type font of?)

de term 'sans-serif' staat voor een 'generic font-family' oftewel een font-soort met een specifieke eigenschap, zoals of het font schreven heeft (serifs, dus je kunt sans-serif kiezen of juist serif), of het een monospace font is (voor bv coding of ascii-art, gelijkblijvende letterbreedte), of eventueel ook fantasy of cursive:
http://www.w3.org/TR/REC-...tml#generic-font-families

Hiermee kun je dus altijd een 'fallback definieren welke toegepast wordt als een font niet gesintalleerd staat, maar je wel zeker wil weten dat een soortgelijke fontsoort toegepast wordt...
dus bij bodytext dat de client altijd een schreef-lettertype kiest.

Indien aanwezig, kiest de UA altijd de eerst gedefinieerde lettertypes, maar mocht een fontnaam niet aanwezig zijn of herkend worden, past hij de volgende toe.

[ Voor 7% gewijzigd door RM-rf op 03-12-2007 14:14 ]

[Verwijderd]

http://www.w3.org/TR/CSS21/fonts.html#font-family-prop

rm -rf /

[ Voor 14% gewijzigd door Verwijderd op 03-12-2007 14:17 ]