Logo Questions Linux Laravel Mysql Ubuntu Git Menu
HTML CSS JAVASCRIPT SQL PYTHON PHP BOOTSTRAP JAVA JQUERY R React Kotlin
 

Set a different font-size for a fallback font

Tags:

css

fonts

On my website I use these fonts: font-family: Segoe UI, Verdana, Geneva, sans-serif

Verdana looks kind of like Segoe UI and is a nice fallback for Macs & iOS devices. Now the problem is that Verdana is just a lot bigger than Segoe UI so on some devices the fonts are just too big.

I cannot seem to figure out how to set the font-size depending on the font applied; 18px for segoe ui and 16px for verdana for example?

Any idea how I could do this using only css?

thanks!

like image 559
cmplieger Avatar asked Aug 12 '12 00:08

cmplieger

People also ask

How do you define a fallback font?

A fallback font is a reserve typeface containing symbols for as many Unicode characters as possible. When a display system encounters a character that is not part of the repertoire of any of the other available fonts, a symbol from a fallback font is used instead.

How do you change the font for the web page What does mean by fall back fonts and how do you give them?

font-family: font-name; but we can also set fallback fonts which would be: font-family: font-1, font-2, font-3; If Font 1 isn't available, font-2 would be used, and so on.

Is Helvetica a fallback font?

So the candidate fallback fonts are Arial / Helvetica, Trebuchet MS, and Verdana.

1 Answers

You could use the ex unit but its implementation has been buggy for some browsers.
Another alternative is using the font-size-adjust property which is supported by Gecko powered browsers.

like image 94
Knu Avatar answered Oct 06 '22 12:10

Knu
Sign in to Comment

Related questions

Troublesome bug Chrome Developer tools in last update. How can I avoid it?
Internet explorer creates horizontal scrollbar for vertical scrollbar's width
Rounded corners in a css table-cell layout?
Changing CSS on the fly in a UIWebView on iPhone
Is there a GUI framework that uses HTML and CSS to build GUIs?
Is there a way to put relationships/contraints into CSS? [closed]
Examples of -webkit-appearance settings
How to iterate through DOM elements that match a css class using xpath?
How to convert shorthand CSS to longhand?
Is there an equivalent of spriting for SVG images in web pages?
How to vertically align text in IE7 without using CSS 'table-cell' property?
Table with 3 columns. Fixed center column width. How to have shared width on other two columns?
Style getting screwed up with hash in URL
How can I get the actual inherited CSS of an element using JavaScript?
Why does scrollWidth only include the left padding?
Auto play and stop html5 audio with jquery
Firefox text 1px lower than chrome and ie
Set CSS style for child nodes in style attribute
jQuery's .css() implementation
How to change css rules of external stylesheet [duplicate]

Donate For Us

If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!