My fonts and images look blurry on Firefox and Chrome on my PC. but looks amazing on Safari, Firefox and Chrome on my Mac
Image below is my font
This image is from my SVG image file
Does it have to do with my CSS? I have this in my CSS
body,
html {
font-family: Roboto, arial, sans-serif;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
height: 100%;
}
Not sure whats going on here. Thanks
Looks like you changed something on your PC. Go to Start, type in Adjust the appearance and performance on Windows, and put on Adjust for best appearance. That should help, I had the same problem.
Related
I am making a embed-able widget for the customers so that they can embed my service on their own website.
I am having one issue that if customer is using bootstrap v3.3.7 (tested only this version so far) on their website so one of its css style:
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box; }
is destroying my app alignment.
My widget app without Bootstrap:
My widget app with Bootstrap:
I have tried a lot of things like I applied internal and inline css styles to override it but nothing worked.
I tried this:
#widgetParent {
font-family: Roboto, Helvetica Neue, Helvetica, Arial, sans-serif;
line-height: normal;
-webkit-box-sizing: content-box;
-moz-box-sizing: content-box;
box-sizing: content-box;
}
Here I applied property value "content-box" because its fixing the issue on Google Chrome Dev Tool but its working in inline or internal css.
I even tried to adjust my app the Bootstrap styles in a way that it will look better but its not possible because obviously not everybody use Bootstrap so my app alignment will crash on without Bootstrap websites.
So, Is there any way I can detect whether the website has Bootstrap or not so I can give styles according to it or any way to prevent this * selector from applying to my widget app ? If anybody have any solution to it please let me know.
Note:
I have tested this on bootstrap v3.3.7 CDN which is included in the app like this :
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"
integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u"
crossorigin="anonymous">
Thank You
I put this in my internal css I mean the html style tag and the problem resolved.
#widgetParent div {
font-family: Roboto, Helvetica Neue, Helvetica, Arial, sans-serif;
line-height: normal;
-webkit-box-sizing: content-box!important;
-moz-box-sizing: content-box!important;
box-sizing: content-box!important;
}
Thanks everyone for help.
I'm having problems trying to stop chrome from making the body fit the screen on here http://www.lgbtgamers.com/sessions . In Firefox it does not and it looks like the footer extends, in chrome it just leaves a white gap.
The CSS for this part:
*{
margin: 0;
padding: 0;
vertical-align: baseline;
-webkit-font-smoothing: antialiased;
-moz-font-smoothing: antialiased;
-o-font-smoothing: antialiased;
}
html{
font: 13px/1.4 Helvetica,arial,freesans,clean,sans-serif,"Segoe UI Emoji","Segoe UI Symbol";
font-family: 'Open Sans', sans-serif;
color: #4F565A;
background: #151515;
}
body{
background: #E5E5E5;
}
The problem seems to be missing DOCTYPE declaration.
Just add the following at the very top of your html (even before the <html> element, on a line of its own, it must be the very FIRST LINE of the document):
<!DOCTYPE html>
This prevents Chrome going into quirks mode emulating odd behaviours of old browsers.
I am using "open sans" font in my website. But it render unclear and dirty edges font. IMAGE BELOW
But i see on some another websites that they are using same open sans font but its very clean and retina ready Image below
Why my text edges are untidy and unclean?
ADDITIONAL: I tried disable the stylesheet codes and text rendering is clear and retina ready. But what i am missing?
I believe I know how to solve this...add this to your css:
body {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
font-smoothing: antialiased;
text-rendering: optimizeLegibility;
}
I add that to ALL my web projects now. It makes the fonts looks much more crisp :)
Demo
Also, when using web fonts, it's a good idea to deliberately specify the font weight.
h1 {
font-family: 'Open Sans';
font-weight: 300; /* 300 is the "light" version of the font, 400 would be "normal" */
}
I have A LOT of input text boxes on a site I am creating with very specific width's in pixels.
The width of the boxes are all the same in Safari and Firefox but in Chrome, they are off by a few pixels fewer. Does anyone know why this happens or what would be causing this?
EDIT: I use Eric Meyer's Reset CSS v2.0 as well
EDIT #2: It looks like Tamil Selvan's box-sizing did the trick. It just really messed up all my heights of other div boxes that I've made. Looks like I'm just going to have to spend some time to fix that. Thanks!!
input {
padding:3px;
height:8px;
outline: 0;
border:0;
border-radius:3px;
}
It looks like Tamil Selvan's box-sizing did some of the trick.
I added the following to really fix some of the problems I was having with the box's not being the same:
*, *:before, *:after {
-moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;
}
However, I have found that letter-spacing is also an issue. Safari and chrome's letter spacing is off slightly too and I am trying to figure out how to fix this as well.
Letter Spacing Example
font-family: 'Arial Narrow', Arial, sans-serif;
font-size:13px;
I noticed that when using position: fixed on an element, the text on the iPad (iOS 5.0.1) is being rendered better than without position: fixed. This is especially the case for white text on darker background.
My question is how to make use of this improved anti-aliasing without using workarounds such as position: fixed.
Below you can find an example picture and the corresponding code.
http://jsfiddle.net/t4kTm/
I don't know why that is, but I do know how to control anti aliasing in webkit browsers:
-webkit-font-smoothing: none; /* Obvious */
-webkit-font-smoothing: subpixel-antialiased; /* This is what quite a few browers already do*/
-webkit-font-smoothing: antialiased; /* Even more than the one above */
Will this help?
After updating to iOS 5 I wasn't able to reproduce this anymore - weird.
On the iPad, applying position:fixed to the body tag makes the font thinner for all child elements (appearance similar to -webkit-font-smoothing: antialiased). I haven't tested exhaustively, but it works with Helvetica Neue in iOS 5.1.1
body {
-webkit-font-smoothing: antialiased; // make fonts thinner in desktop Webkit
position: fixed; // make fonts thinner on the iPad
}