Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    Regular Coder Krupski's Avatar
    Join Date
    Dec 2010
    Location
    United States of America
    Posts
    505
    Thanks
    39
    Thanked 47 Times in 46 Posts

    Pre-scale a CSS font?

    Hi all,

    I am using CSS "webfonts" (embedded fonts) like this:

    Code:
    @font-face {
        font-family:'css-mono';
        src: url('./fonts/UbuntuMono.eot'); /* MSIE */
        src: local('☺'), url('./fonts/UbuntuMono.ttf') format('truetype');
        font-weight:normal;
        font-style:normal;
    }
    Then of course I use "font-family:css-mono" to style the page font.

    What I would like to do is BIAS certain fonts so that their base size is larger. I am trying to do something like this:

    Code:
    @font-face {
        font-family: 'css-mono';
        src: url('./fonts/UbuntuMono.eot'); /* MSIE */
        src: local('☺'), url('./fonts/UbuntuMono.ttf') format('truetype');
        font-weight: normal;
        font-style: normal;
        font-size-adjust: 125%;
    }
    See in red? So when I use a standard "font-size:1.0em"; the font actually shows up 125 percent larger than the base size.

    Is there any way to do this?

    Thanks!

    -- Roger
    "Anything that is complex is not useful and anything that is useful is simple. This has been my whole life's motto." -- Mikhail T. Kalashnikov

  • #2
    Senior Coder Arbitrator's Avatar
    Join Date
    Mar 2006
    Location
    Splendora, Texas, United States of America
    Posts
    3,338
    Thanks
    29
    Thanked 282 Times in 276 Posts
    Quote Originally Posted by Krupski View Post
    See in red? So when I use a standard "font-size:1.0em"; the font actually shows up 125 percent larger than the base size.

    Is there any way to do this?
    Assuming that, by "base size," you mean the user's default font size:

    Code:
    html { font-family: "css-mono", monospace; font-size: 1.25em; }
    some_element { font-size: 1rem; }
    "rem" is short for "root em." rem units are relative to the font size specified on the document's root element (which is html in HTML/XHTML).

    The compatibility table located at http://caniuse.com/#search=rem indicates that every browser's current release supports this unit except Opera (11.5). Apparently, Opera 12 (which is currently available as an alpha prerelease) also supports the unit.

    If you're trying to adjust the font size relative to other fonts, you might want to try the procedure shown in Example IV at http://dev.w3.org/csswg/css3-fonts/#...ze-adjust-prop.
    For every complex problem, there is an answer that is clear, simple, and wrong.

  • Users who have thanked Arbitrator for this post:

    Krupski (11-01-2011)

  • #3
    Regular Coder Krupski's Avatar
    Join Date
    Dec 2010
    Location
    United States of America
    Posts
    505
    Thanks
    39
    Thanked 47 Times in 46 Posts
    Quote Originally Posted by Arbitrator View Post
    Assuming that, by "base size," you mean the user's default font size:.....
    AWESOME! Works like a charm. THANK YOU!
    "Anything that is complex is not useful and anything that is useful is simple. This has been my whole life's motto." -- Mikhail T. Kalashnikov


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •