What fonts to use when designing xhtml pages via CSS for mobile phones?
Firstly I plan to CSS to style pages (with fluid layouts) which are targetted towards mobile browsers.
<style type="text/css">
body {
background-color: #000;
color: #fff;
font: normal 95%/130% "Trebuchet MS", Verdana, Arial, sans-serif;
margin: 0;
padding: 20px 0;
}
</style>
What values should I put in the font property ? (Forgive me, but I am a CSS newbie, is font referred to as a property of the body element ?) It is obvious that mobile devices will not have开发者_如何学运维 a common fontface, so should I just leave it empty?
Mobile devices cover thousands of devices. Some devices come with only proprietary fonts (like BlackBerry), and some devices come with limited font support. The only safe way to specify fonts is to use the generic font families and let the device choose the best match.
http://www.w3.org/TR/CSS2/fonts.html#generic-font-families
Just make sure to specify a default font family (like sans-serif or monospace) so that the page degrades nicely even if all fonts you specify are unavailable.
Apple uses Helvetica, so if you want the Apple look, you could declare that in your font-family array. However, not all mobile devices will have Helvetica, so you'll definitely want to declare at least sans-serif at the end of the array. Here's a string using what at one point were the default sans-serif fonts for the major handheld platforms:
body {
font-family: Helvetica, "Droid Sans", Prelude, BBMillbank, "Microsoft Tahoma", sans-serif;
}
Of course, if you just declare sans-serif I'm guessing you'd get these as default anyway. (I'd love to be able to test on all platforms directly. Emulators get you only so far.)
Mobile devices should have most of the basic font faces that browsers have available. They're still rendered on a screen, so its important to use a non serif font (Verdana, Arial are good choices). Usually, you put in the CSS a multiple of font faces in an "order of preference"
精彩评论