I have a page that is using a non-standard font and arial as a fail safe. Does anyone know if there is a way to set the font-size conditionally to the font?
<style type="text/css">
body {
font-family: Calibri, arial, sans-serif;
font-size: 1em, .9em, .9em;
/* Where 1em would be for Calibri and .9 would be for arial and sans-serif */
}
</style>
Good question but currently you can't do this until the 'font-size-adjust' property is more widely supported. It normalises fonts that have very different native sizes. This is the simplest definition and example I could find:
http://www.w3schools.com/CSS/pr_font_font-size-adjust.asp
I'd say there's no harm in using it even now and then it'll be ready when browser support improves.
The solution would be to use font-size-adjust. The problem is that it has poor support (IMHO).
Related
I have the following problem.
On mobile browsers the font (which is loaded with #font-face) seems to have a weird offset in its line-height. It appears to move towards the top a little bit.
I figured out it's the font. When I load Open Sans for example...no problem.
#font-face loaded font (Rubrik):
http://s12.postimg.org/gnre9viod/Rubrik.png
Open Sans:
http://s27.postimg.org/s4jgc6zyb/Open_Sans.png
Look at the small grey text saying 't/m 6 maart 2016'
It's shifted to the top.
I have tried:
Fix/Automatic verticle metrics with fontsquirrel
Redownloading the original font and generating webfonts with different generators
I have the following CSS:
body {
height: 100%;
width: 100%;
font-family: $typenormal;
font-weight: normal;
font-size: 18px;
#media(max-width: 991px) {
font-size: 14px;
}
line-height: 1.5;
color: #111;
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
}
I am loading:
eot
eot / IEfix
woff
woff2
ttf
svg
Doesn't work. Any other idea's than to use Open Sans?
Try using SVG instead of the other types of the font. (Edit #font-face)
Since Rubrik font doesn't have one, you may want to convert .otf to .svg at the link below.
https://onlinefontconverter.com/
I started creating an app using Bootstrap, and ended up customizing the CSS so much as to not need Bootstrap at all. However, when removing the bootstrap CSS file, I ran into a problem.
I have an element which I am assigning 120% font-size:
#page-title {
font-size:120%;
}
Now with Bootstrap 3.3.5, the font is one size, apparently calculated to 14px according to chrome dev tools.
However, if I remove the Bootstrap CSS and just set body to have a font-size of 14px (and the various other Bootstrap styles such as line-height), the font is a different size, but only on Windows Phone 8.1 IE11.
my body css is the following:
body{
margin:0px;
font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
font-size: 14px;
line-height: 1.42857143;
}
Which is, as far as I can tell, the same as Bootstrap's. I am also still including all the same meta tags. The only difference is the CSS file.
My question is not why does this specific version of IE do this (as I cannot recreate it on Windows 8.1 IE11), but what magic does Bootstrap's CSS have that I can copy?
I went digging through the entirety of the Bootstrap CSS and found the bit that was missing.
#-ms-viewport {
width: device-width;
}
This fixes the font sizing (and a few other tweaks) On Windows Phones and Tablets that appear correctly with Bootstrap, but not without.
I have some rather complicated CSS, but the gist is that I have this:
font-family: Arial, Sans-serif;
font-size: 12px;
font-weight: bold;
There are no other font-weight modifiers in my CSS except normal and bold. Chrome works just fine.
IE11 -sometimes- renders this as Arial, but other times as Arial Black. This is on the same page. I tested this on our test Windows 8 box, and it is always the same text that ends up in Arial Black.
Is there any way to prevent this from happening?
OK, this is really silly, but I found out why it is happening.
My element was contained in a html B element, which gets it's own font-weight in IE, overriding the font-weight I set.
IE somehow changes the font in the B element by default. Manually setting font-weight:bold fixed the issue.
It looked like this:
<span style="font-family:Arial; font-weight:bold"><b>text</b></span>
I have this problem:
body{
font-family: 'MyFontFace-font', 'Lucida Grande', Tahoma, Verdana, Arial, etc.
}
H1 {
font-family: 'MyFontFace-font2'
}
And my question is: If the second font ('MyFontFace-font2') is not loaded, will H1 have the font inherited from body, or from default of browser?
Thanks a lot.
The default fallback fonts of the browser will be applied, and any setting on body is ignored.
When you assign a value to a property of an element, like font-family to h1 here, then inheritance will never apply to that property on that element (except, trivially, if you assign the value inherit and the browser supports that). This is not changed by casual things like the value specifying a nonexistent font.
I also tested this with the following simpler document (on a system that has no font named MyFontFace-font2 but has a font named Tahoma):
<!doctype html>
<title>Test5</title>
<style>
body{
font-family: Tahoma;
}
H1 {
font-family: 'MyFontFace-font2'
}
</style>
<h1>Hello world</h1>
In Chrome, Firefox, IE the result is that the browser’s default font is used, not Tahoma. This is the expected result, by the specifications.
If the rule on H1 is omitted, then Tahoma is used, due to inheritance – then the h1 element will inherit the font-family property from its parent.
I'm designing a site with a fixed repeated background but can't work out why it has one problem.
If you load the site in a small window, then scroll right, the background doesn't carry on and the background colour show's instead.
Any ideas?
Site is: http://new.focalpix.co.uk/
CSS for the background is:
body {
background: url(http://media.focalpix.co.uk/img/gradbackground.png) repeat-x fixed;
}
Try the following CSS:
body, html {
color:#fff;
background: #000 url(http://media.focalpix.co.uk/img/gradbackground.png) fixed repeat-x;
text-align:center;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "DejaVu Sans", "Bitstream Vera Sans", "Liberation Sans", Verdana, "Verdana Ref", sans serif;
}
body {
font-size: 70%;
}
It looks like (in both Opera and Chrome) the browser is treating the area outside the browser's initial viewport as part of the HTML tag but not part of the BODY. You can verify this by putting the background-image on the HTML but not the BODY tag - and then see how it appears only in the scroll-to-view area of the document. I have no idea why this is happening - anyone?
CSS above appears to fix the problem, though.
you have defined body background: url in style.css line 13, but also defined rules for body background in the rule starting on line 17.
The rule on line 17 is for body, html, but the one starting on line 11 is just for body. You could probably condense these into one rule, defining exactly what you want the background to be -- a colour or an image from a url
This is due to the fact that the <body> tag is set by default to 100% of the width of browser window - not the site. This means when the width of the window is less than 960px - the width of your site, the body block ends. To fix this, simply set:
body {min-width: 960px}
Unfortunately, min-width does not work in old versions of Internet Explorer without a JavaScript hack called minmax. I would suggest enclosing the javascript embed code for it inside some conditional comments to prevent an unnecessary HTTP request and potential compatibility errors in new browsers. So embed minmax like so:
<!--[if lte IE 7]>
<script type="text/javascript" src="minmax.js"></script>
<![endif]-->
Also, a general tip - these issues are fairly easy to resolve by playing with firebug.