How to make fonts display on web cross-platform?


Tags: css,fonts,cross-platform

Problem :

I use pixel setting of font size in my CSS-code. for example:

.items {
    font-family: Verdana, Arial;
    font-size: 14px;
    width: 100px;
}

I have a problem. For example there are words Hello words written in element of class .items. Element fits in 100px and is displayed OK (in Ubuntu Linux). But in Windows browsers fonts are wider and text doesn't fit in 100px, so 2 lines of text appear (that I don't want to be)

How to protect your site from such problems? How to be sure, that every text in elements fits its container?



Solution :

You might try to protect from such problems by setting a large enough width. But there is no way to guarantee that some width is always sufficient, and if the width is sufficient in most cases, then it is far too large in many cases.

The width of text depends on many things, not just on font size (which has no simple relationship to the width)—characteristics of the font (advance widths of characters), the actual text (say, many m’s vs. many i’s), and in principle letter spacing and word spacing too. It does not depend on operating system, though different systems may have different common fonts. It indirectly depends on language, since different languages use different writing systems, whereby widths of letters may vary a lot.

Using em instead of px has several benefits, but it does not help in this issue. The em unit is the height of the font and cannot be used to evaluate the width of characters.

So you just have to live with this. For example, if you wish to set up a vertical navigation bar where the links (presented in button-like manner or otherwise with their width visible), a single-column table is the practical solution, since it results in a presentation where all cells are of equal width, determined by the cell with largest width requirements.


    CSS Howto..

    How to apply a CSS transition only to the transform property

    How do I replace color: windowtext;

    How to get a hidden content to show over cursor using html, css, javascript?

    How to divide 3 divs(CSS + MVC)

    how can i trigger multiple hover actions/events?

    How to add font awesome in CSS

    Hiding and showing elements with jQuery flickers in Chrome and Edge

    how to put img inside circle in html and css?

    How to remove dotted border around active hyperlinks in IE8 with CSS

    How do I style a Javascript button using d3?

    Flexbox: How do I create my thumbnails to span 100% of the container width?

    How to select elements using CSS selector who's attribute can have multiple values

    How to let an object not take up its natural width

    How to do a webkit css endless rotation-animation.

    How to align icon inserted with :before method?

    css how to force a layer to be in the back (z-index doesn't work)

    How to use Open Sans font with cakePhp 3?

    How can I adjust the Wordpress Twentyeleven theme so that the page width is 100% and centered?

    How does bootstrap restrict minimum page width to 400px

    How can I get text to be vertically-aligned to the bottom and fill the empty space above it as needed?

    How to use #resource in CSS?

    how to style xml tag attribute with css

    how to place css div container “text-align: center ;”

    How to make three columns all the full height of the page?

    CSS, borders: How do I prevent a border added to a table cell from displacing neighboring cells?
    I think you'll either need to size all non border cells wider and higher by the width of the line around it. or you given them all borders and set...
    Read more

    How to align a HTML definition list (
    ) horizontally without limiting term or definition in height?

    How to Hide Specific Part of Flash Object Using CSS?

    How do you position CSS elements directly under each other?

    How to make a div align with a specific td on the page?

    How to make a very simple coloured 1-line text area?