I am currently making a mobile version of our application and I am trying to find a resource that lists out what Fonts the Blackberry devices support. I search around on the Blackberry development site and forums but have not had much luck.
So far, any font I specify using CSS does not appear to be working.
If you can't find a list of supported font names, you can simply specify font-families. These are the font-families used in WCSS (WAP CSS):
serif
examples: Times New Roman
sans-serif
examples: Arial, Helvetica
monospace
examples: Courier
cursive
examples: Zapf-Chancery, Caflisch Script
fantasy
examples: Western, Critter
Content Design Guidelines from RIM:
Best Practices: Using fonts effectively in your web content
Modify fonts judiciously. Use the user-defined default font for the BlackBerry® Browser where possible, unless you have a
specific need to select a different font. Although using the user-defined default font makes it more difficult to control layout
and appearance, it avoids issues of choosing a font face or font size that the user finds hard to read. Users will either change
the default BlackBerry Browser font to a suitable font face or and font size, or accept the theme-specified default font.
Avoid absolute font sizes where possible. If you change the font size, use relative sizes, such as larger, smaller, xx-large, and
so on. In standard text flows, such as a series of paragraphs, changing the font size is unnecessary, since text will wrap.
Keep in mind that the user can specify the smallest font size for the BlackBerry Browser, so relative or absolute font sizes
that are less than the specified smallest font size will produce no effect on a user's device.
Some resources you might be interested in:
Documentation for Developers (Blackberry Browser) - Includes CSS guide.
Browser Specification (flash presentation)
WCSS Tutorial
User-Agent Profiles of all Blackberry Devices - Shows supported mime-types, character sets, screen size, Java support, etc.
Related
I have an – character that becomes invisible when the text is rendered at a smaller font size (the applicable font-size rule is 14px, at which it is invisible; if I zoom in one level in Firefox, it becomes visible.) I have only seen this behavior on Firefox on Windows. With Firefox on Linux, I see the character at all sizes. I believe that what happens is that at smaller sizes, the dash is allowed to render as a line of zero width. So the question is, how can I remedy this? Here's what I can think of -
Try a different dash character and hope for the best
wrap the dash in a span and force it to be bigger - seems clunky
maybe my font definition is broken - this is embedded Open Sans
any other approach I'm overlooking?
Don't use any of the legacy 90's Microsoft core fonts in Windows (Arial, Verdana, etc). They have very aggressive hints intended to prevent "fat" or "blurry" stems at all costs, that result in some of those stems disappearing at small sizes. Perpetuating the pixelated look Windows users were accustomed to was the only thing Microsoft cared about at the time (there are built-in workarounds in the Microsoft rendering stack to hide the bugs of those fonts, but they don't exist in third-party apps).
Have you tried a different font-family to see if it's showing the same problem?
This is a problem of fonts, not browser support. Try to use another font like "Times New Roman" to verify.
In the case of the small icons, the most reliable solution is to use the CSS #font-face rule to ask the browser to download a particular font. Then you'll know for sure that the user has an appropriate font installed. There are even some fonts designed specifically for this use, with extra icons built in: "Font Awesome" is a well-known example.
Please look here for more information: Does every browser support all unicode?
I'm searching for a method to tell the browser to render each glyph rendered with a specific font, e.g. FreeMono, in a bigger font size than glyphs rendered with other fonts. The reason for that is, that I use characters like ᚠ in a website and these glyphs are rendered using FreeMono in Chrome (see inspect element → computed → rendered fonts) and they look always like they're to small to fit the surrounding text. Is there any way I can do that?
You cannot. CSS has no tools for such font-specific tuning, apart from the font-size-adjust property, which has very limited effect, limited browser support, and buggy support.
If you use a character such as “ᚠ” U+16A0 RUNIC LETTER FEHU FEOH FE F on a web page, then it will be up to each browser in each system which font (if any) is used to render it, at least if you do not explicitly suggest some font(s) that contain it. It may be FreeMono, but most computers in the world do not have it. Besides, in FreeMono, “ᚠ” is rather large—taller than uppercase Latin letters. So if it looks too small, the reason might be a mix of fonts.
To make, say, Runic letters match the style of other text, you should try and find a font that is suitable for both—so that you can use a single font, designer by a typographer to make things fit. You would then probably need to find a suitable free font and use it as a downloadable font (with #font-face). It might be FreeSerif or FreeSans; only in very peculiar circumstances would I consider FreeMono, a monospace font, suitable for rendering computer code in some cases and mostly unsuitable for everything else.
I'm currently developing a site for my University's library, and a very strange issue came up. The font on the website, whether the live version or the one on my machine (not the server) is always smaller than it should be. This is only the case on two computers--my own, and my supervisor. It happens in all browsers. I'm pretty sure it's happening on both of ours because we've handled code, but I can't think of any CSS rules that would be affecting it. To make it worse, it's affecting two different CSSs--the old site (which I have not touched) and the new site which is intended to be rolled out tomorrow. I've tried fixing the way the computer displays fonts, the way browsers display fonts, changed the resolution, and tried zooming in. None of those methods worked. Also, other computers with the same resolution and monitors look at it just fine. No other websites that I visit have this issue. I'm stumped. Any ideas?
The site is here: http://library.uis.edu
Comparisons of the text can be seen here: http://imgur.com/a/Tb7Mv
I think this might be a font issue, rather then a font size issue. Myriad pro is not considered a websave font. As your machine and probabaly the one of your supervisor have probabaly Adobe installed, wich comes with Myriad, you are seeing the site in Myriad, while the other machines are seeing the site in Verdana. (not entirely sure though)
It looks like you are calling Myriad Pro as the first font. I have that font installed on my system, but you're calling the font size to be 75%, which on a font like Myriad Pro, will shrink it down considerably. If I clear the font-size, and font-family to just Verdana, it renders okay, but some of your elements such as the tabbed nav, would need to be addressed.
I'd stay away from fonts like that unless you are using #font-face and a web generated font pack. By choosing Myriad Pro as your font, you will only render that font on computers that also have the font. Consider using something like Google Web Fonts: http://www.google.com/webfonts/
Having fonts at the body level is fine, and cross fonts (headings versus paragraph) should be handled at a global level for those elements (not the body). Assume the body will take the bulk of the text in the body. You can define a standard font size such as 1.0em; at the body level if you wanted, and then define em sizes for other elements such as h1, h2 tags, and p tags if you don't want to use 1.0em from the body.
I'm using Dreamweaver for many years which gives some suggestions to put font-families in CSS.
Is it not a font-stack? What is new in the term "CSS Font Stack"
What I know is, that one defines multiple font families to keep the typography consistent if any font is not available in system.
You are correct - You define multiple fonts and the browser will simply choose the first one in the list that you have on your system.
A font stack allows you to define multiple fonts to essentially provide a better experience for users.
Using the CSS font-family property, you can define multiple fonts, like so:
font-family: Arial,Liberation Sans,DejaVu Sans,sans-serif;
This reads from left to right, if the user does not have Arial then font-family will fallback on Liberation all the way down to the most basic sans-serif (select any sans-serif font if the aforementioned fonts are not found).
font stack, is just a list of fonts (of font families), if the first is not available to the browser, then the second is used etc..
your picture shows 6 font stacks, you could choose from
there's nothing new, this has been the standard way to set fonts for some years now.
You are correct in your thinking. The pulldown menu has 'Web Safe' font stacks to choose from. If you use any of them your text should render fairly consistently on all devices and on all browsers.
The trend now is to use Google Fonts or some other imported or loaded fonts and thereby control what is rendered. Even then it is recommended to also include one or more alternative standard fonts in a font stack in case your visitors cannot load Google Fonts or the other choices you provide.
I wanna create special font containing only icons. and for each letter will be diffirent icon.
I want to embed this font in css.
and use like this
if i need some icon:
<a class="icon">f</a>
and css
<link href='http://fonts.mysite.com/css?family=MyFontWithIcons' rel='stylesheet' type='text/css'>
which contains:
#media screen {
#font-face {
font-family: 'MyFontWithIcons';
font-style: normal;
font-weight: normal;
src: local('MyFontWithIcons'), url('http://fonts.mysite.com/font?MyFontWithIcons') format('truetype');
}
}
and to show icons with icon class:
.icon {font-family: 'MyFontWithIcons'; }
And letter "f" will be replaced with icon inside font which located on the place of f letter.
and css works with font and replacing f with icon inside font.
I think it's good idea or not? font file is less in size than lots of image icons.
and also with this technique I can use diffirent font colors = diffirent icon colors? sizes and so on.
So, it's good idea or not?
The problem with using a custom font for icons is that you've got no backup plan if:
Your user's browser is too old to support #font-face
The user agent isn't your traditional browser (eg. Screen readers for the blind, search engines, HTML-to-text converters, etc.)
The user copy-pastes the text containing the "icon" into something that discards rich formatting information or doesn't have the font in question.
The user agent will never support #font-face (Eg. Textual web browsers like Lynx, Links2, and ELinks for Unix/Linux)
The user is behind a corporate proxy that discards or mangles headers that your browser demands before displaying custom fonts. (more common than you think)
The user is running NoScript with the default font-blocking behaviour enabled to protect against 0-day exploits in the font engine.
Images provide the alt attribute for just this reason.
However, if you're going to use a font for icons, make sure you store your glyphs in a Unicode Private Use Area. That'll mitigate the problem a bit by ensuring there's probably no conflict (Companies can and do sometimes use PUA glyphs to store custom data) and, if they're coded smartly, screen readers could know to gracefully ignore PUA glyphs.
As for implementing a fallback, I'd suggest using Modernizr (specifically, Modernizr.fontface) to test for support.
It's a good idea but it doesn't work in all browsers (yet). Also, it only works with 2 color images (black and transparent), which makes it rather limited. For people with text browsers or text to speech software, it won't make any sense. It's not really 'semantic', because the <img>-tag was meant for images. Using fonts for that won't make any sense from a html-only perspective. It also clutters your css.
So that's a lot of bad things just for a little bit less bandwith; I wouldn't bother.
#font-face is not supported uniformly across browsers. Its a bit of a task to cater to all browsers esp. if including IE6
Accessibility: screen readers won't read icons, they would still see an 'f' and not an icon
You would need some fallback to degrade gracefully
All the other answers focus on the downsides.
I am, personally, a big fan of using icon fonts.
Here are some good reasons to use an icon font:
You can seamlessly use icons inline with text. If you include an icon inside of a block of text, it will inherit the font size and color of its parent, and will be aligned with the accompanying text's baseline.
you can change the color of icon dynamically using css, without having to create and upload additional image files and use js to manipulated the markup. this means that a) you are keeping style determinations where they belong, i.e. in your stylesheets and b) you can simply and easily make your icon colors contextual (e.g. all icons inside headers are white, or else they are black) and themable (e.g. all icons are white if body has class dark-theme, and all icons are pink if body has class tropical-theme)
the icon can easily be scaled without using additional bandwidth (as it would if you were increasing the size of the image file), without having to create and upload additional image files. corollary: you don't have to worry about different screen resolutions and don't need to make any allowances for retina, etc.
your font file will likely have a smaller file size than your image files would so, again, save on bandwidth.
if you use a font generator such as fontello, your collection of icons will automatically be catalogued for you and your designers to scrutinize, in a demo file. in addition, fontello has an API so your font generation can be managed automatically as part of your build process.