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.
Related
I am new to CSS/HTML. I have created this website and I want it to look good on mobile phone as well. When I browse the website from my iphone it is scrolled out at max and the text from frow(first row -£20 voucher),srow(second row-at),trow(third row - £4.99) are very small, unreadable. What's wrong?
.frow {
font-size: 60px;
font-weight:900;
}
.srow {
margin-top:10px;
line-height:5px;
font-size: 45px;
font-weight: 600;
}
.trow {
color: #FF0000;
text-shadow: 2px 2px #000;
font-size: 100px;
font-weight: 900;
}
You will have to define the meta viewport in order to support mobile devices the way you want:
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
Include this in your <head>.
Modern mobile browsers usually scale the page down, if the viewport doesn't define something else. With the viewport, the page is not scalable (user-scalable=no) so it just looks like opened on a small window.
The next step would be, if not already made, making the page usable on small screen resolutions. In order to achieve this, CSS media queries might be helpful.
About the viewport meta tag: http://html5-mobile.de/blog/meta-viewport-fuer-mobile-anpassen
About CSS media queries: http://www.w3schools.com/cssref/css3_pr_mediaquery.asp
Instead of hard coding the length, you can try out twitter bootstrap framework from: http://getbootstrap.com/, which can easily create mobile friendly layout.
I have the following HTML:
<div class='box'>text</div>
and CSS:
.box {
/* non-essential */
display: inline-block;
margin: 2em;
background: plum;
/* ESSENTIAL */
transform: rotate(45deg);
font-family: Courier;
}
And this is the fiddle. I've omitted the prefixes here, but they are in the fiddle.
Expected result:
It is also the result I get in Chrome, Firefox, IE9, Safari.
However, in Opera it looks like this:
If I take out the transform (that is, the div is not rotated
anymore), then the text is shown.
If I replace the font with another one, then the text is shown.
So why is this happening and what other solutions do I have?
In case this helps:
Why is this happening
It's happening because Opera has resolved Courier to courier.fon a bit-mapped font, and Opera has not implemented rotation for bit-mapped fonts.
You get the same results with Modern and Roman and any other font where you have a .fon version.
You can look in C:\Windows\Fonts for a complete list.
What other solutions do I have
If you are relying on the exact metrics of the font when it is presented on the page, you may want to consider using a web font.
If calling the font "courier" is important, then you could ignore opera: It's not very popular, this is a bit of an obscure bug, and since Opera is ditching Presto for Webkit, it simply involves waiting.
If you change the font-family tag to the below it works:
font-family:"Courier New", Courier, monospace;
http://jsfiddle.net/3tTyp/1/
I have custom-made web fonts used on my site. To style my rendering output, I used the following code:
//-webkit-text-stroke-width: .05px;
//-webkit-text-stroke-color: white;
-webkit-font-smoothing: antialiased;
This works fine on Safari and Chrome (edges are sharper and lines are thinner).
Is there any way of implementing the same style on Firefox and Opera?
As Opera is powered by Blink since Version 15.0 -webkit-font-smoothing: antialiased does also work on Opera.
Firefox has finally added a property to enable grayscaled antialiasing. After a long discussion it will be available in Version 25 with another syntax, which points out that this property only works on OS X.
-moz-osx-font-smoothing: grayscale;
This should fix blurry icon fonts or light text on dark backgrounds.
.font-smoothing {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
You may read my post about font rendering on OSX which includes a Sass mixin to handle both properties.
Well, Firefox does not support something like that.
In the reference page from Mozilla specifies font-smooth as CSS property controls the application of anti-aliasing when fonts are rendered, but this property has been removed from this specification and is currently not on the standard track.
This property is only supported in Webkit browsers.
If you want an alternative you can check this:
Text-Shadow Anti-Aliasing | Philip Renich, Websites - blog
cufón - fonts for the people
Case: Light text with jaggy web font on dark background Firefox (v35)/Windows
Example: Google Web Font Ruda
Surprising solution -
adding following property to the applied selectors:
selector {
text-shadow: 0 0 0;
}
Actually, result is the same just with text-shadow: 0 0;, but I like to explicitly set blur-radius.
It's not an universal solution, but might help in some cases. Moreover I haven't experienced (also not thoroughly tested) negative performance impacts of this solution so far.
After running into the issue, I found out that my WOFF file was not done properly, I sent a new TTF to FontSquirrel which gave me a proper WOFF that was smooth in Firefox without adding any extra CSS to it.
I found the solution with this link :
http://pixelsvsbytes.com/blog/2013/02/nice-web-fonts-for-every-browser/
Step by step method :
send your font to a WebFontGenerator and get the zip
find the TTF font on the Zip file
then, on linux, do this command (or install by apt-get install ttfautohint):
ttfautohint --strong-stem-width=g neosansstd-black.ttf neosansstd-black.changed.ttf
then, one more, send the new TTF file (neosansstd-black.changed.ttf) on the WebFontGenerator
you get a perfect Zip with all your webfonts !
I hope this will help.
... in the body tag and these from the content and the typeface looks better in general...
body, html {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
text-rendering: optimizeLegibility;
text-rendering: geometricPrecision;
font-smooth: always;
font-smoothing: antialiased;
-moz-font-smoothing: antialiased;
-webkit-font-smoothing: antialiased;
-webkit-font-smoothing: subpixel-antialiased;
}
#content {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
When the color of text is dark, in Safari and Chrome, I have better result with the text-stroke css property.
-webkit-text-stroke: 0.5px #000;
Adding
font-weight: normal;
To your #font-face fonts will fix the bold appearance in Firefox.
Fonts in the latest Chrome, Opera, Safari and Firefox look fine but in IE9 they look blurry and small in comparison. On other sites they look alright though?
Is there anything I can change in CSS to make them all look the same? Mainly the size as it makes the whole website look odd...
I'm using the following CSS:
margin: 0px;
padding: 0px;
font: 11px Verdana, Arial;
line-height: 13px;
Declaring
<!DOCTYPE html>
will make IE9 behave just that bit better.
I would look in HTML5 Boiler Template. They've already solved all these little quirks and created a nice boilerplate for people to use.
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).