Hello guys I have a problem with my fonts, I don`t know why are pixeled as you can see in the attach. Cheers!
And you have there also a print screen of the print screen zoomed :D <3
This may depend on typography and rendering used by the browser, you can try to set this to improve the text:
html * {
text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased;
}
Related
The text is correctly displayed in Chrome. I want it to display this way in all browsers. How can I do this?
I was able to fix this in Safari with -webkit-font-smoothing: antialiased;
Chrome:
Firefox:
h1 {
font-family: Georgia;
font-weight: normal;
font-size: 16pt;
color: #444444;
-webkit-font-smoothing: antialiased;
}
<h1>Hi, my name</h1>
And a JSFiddle: http://jsfiddle.net/jnxQ8/1/
Be sure the font is the same for all browsers. If it is the same font, then the problem has no solution using cross-browser CSS.
Because every browser has its own font rendering engine, they are all different. They can also differ in later versions, or across different OS's.
UPDATE: For those who do not understand the browser and OS font rendering differences, read this and this.
However, the difference is not even noticeable by most people, and users accept that. Forget pixel-perfect cross-browser design, unless you are:
Trying to turn-off the subpixel rendering by CSS (not all browsers allow that and the text may be ugly...)
Using images (resources are demanding and hard to maintain)
Replacing Flash (need some programming and doesn't work on iOS)
UPDATE: I checked the example page. Tuning the kerning by text-rendering should help:
text-rendering: optimizeLegibility;
More references here:
Part of the font-rendering is controlled by font-smoothing (as mentioned) and another part is text-rendering. Tuning these properties may help as their default values are not the same across browsers.
For Chrome, if this is still not displaying OK for you, try this text-shadow hack. It should improve your Chrome font rendering, especially in Windows. However, text-shadow will go mad under Windows XP. Be careful.
In order to best standardise your #font-face embedded fonts across browsers try including the below inside your #font-face declaration or on your body font styling:
speak: none;
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
line-height: 1;
-webkit-font-smoothing: antialiased;
At present there looks to be no universal fix across all platforms and browser builds. As stated frequently all browsers/OS have different text rendering engines.
There's some great information about this here:
https://bugzilla.mozilla.org/show_bug.cgi?id=857142
Still experimenting but so far a minimally invasive solution, aimed only at FF is:
body {
-moz-osx-font-smoothing: grayscale;
}
Try -webkit-font-smoothing: subpixel-antialiased;
I collected and tested discussed solutions:
Windows10 Prof x64:
* FireFox v.56.0 x32
* Opera v.49.0
* Google Chrome v.61.0.3163.100 x64-bit
macOs X Serra v.10.12.6 Mac mini (Mid 2010):
* Safari v.10.1.2(12603.3.8)
* FireFox v.57.0 Quantum
* Opera v49.0
Semi (still micro fat in Safari) solved fatty fonts:
text-transform: none; // mac ff fix
-webkit-font-smoothing: antialiased; // safari mac nicer
-moz-osx-font-smoothing: grayscale; // fix fatty ff on mac
Have no visual effect
line-height: 1;
text-rendering: optimizeLegibility;
speak: none;
font-style: normal;
font-variant: normal;
Wrong visual effect:
-webkit-font-smoothing: subpixel-antialiased !important; //more fatty in safari
text-rendering: geometricPrecision !important; //more fatty in safari
do not forget to set !important when testing or be sure that your style is not overridden
I have many sites with this issue & finally found a fix to firefox fonts being thicker than chrome.
You need this line next to your -webkit fix -moz-osx-font-smoothing: grayscale;
body{
text-rendering: optimizeLegibility;
-webkit-font-smoothing: subpixel-antialiased;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
I don't think using "points" for font-size on a screen is a good idea. Try using px or em on font-size.
From W3C:
Do not specify the font-size in pt,
or other absolute length units. They
render inconsistently across platforms
and can't be resized by the User Agent
(e.g browser).
Try text-rendering: geometricPrecision;.
Different from text-rendering: optimizeLegibility;, it takes care of kerning problems when scaling fonts, while the last enables kerning and ligatures.
So I have this really weird issue on a page. The users need to be able to zoom out to make the text even smaller than the 10px I've already set it to. That's all well and good, but for some odd reason, the text gets really blurry at certain areas.
The text in question is in a data table, and it will only appear this way on maybe 2/5 rows, making the behaviour even weirder. Doesn't matter if I resize the window or anything like that, it's always the same 2 rows.
I've looked at multiple other questions, but they all involve issues stemming from transform: scale(), etc. This did lead me to try out multiple fixes (backface-visibility etc), but none of them worked. Using CSS zoom: 90% looks perfectly fine, so it's just when the browser does the zooming.
Would appreciate any suggestions, I've spent far too long on this problem already.
Base font: 400 13px/24px Roboto, "Helvetica Neue", sans-serif
Try using -webkit-font-smoothing: antialiased; like this
* {
-webkit-font-smoothing: antialiased;
}
My problem is that in my web page I want to create the design of a newspaper and I need to put my text with the alignment that usually in css we can do with this code:
.text-art{
text-rendering: optimizeLegibility;
text-align: justify;
word-spacing: -1px;
}
The problem is that the result create blank spaces between the words that ruins the legibility and the graphic of the entire text, as shown in this image:
Does anyone knows how can I solve the problem? Or if exist any javascript way to obtain a better result? Moreover my page is responsive so when I make the window little, the problem is bigger.
Hope you can help me! Thanks in advance!
Use word-break instead
.text-art{
text-rendering: optimizeLegibility;
word-break: break-all;
}
Your problem stands with the line length. Your lines are too short in terms of words/line. That is why the spaces between words are evident.
You have a few options:
Use smaller font size, so that more words fit on each line
adjust letter-spacing
Use left alignment
I would go with smaller font size for small windows.
I have a webapp that uses Dosis as its main font (http://www.google.com/fonts/specimen/Dosis), and it looks great every browser but Safari mobile, where my font is rendered like this:
http://imgur.com/a/w4XEu (The iPhone rendering is the one in the second image.)
The font is imported in this way:
<link href='http://fonts.googleapis.com/css?family=Dosis:200' rel='stylesheet' type='text/css'>
If I increase the font weight the rendering is slightly better, but still weird.
I've tried few workaround with CSS, like:
* {
font-weight: normal;
text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased;
font-smoothing: none;
}
but solved nothing.
Any idea on what is the reason of this strange behaviour?
edit, one maybe important detail:
that table is handled by owlcarousel2 (https://github.com/OwlFonk/OwlCarousel2)
Try one of these:
-webkit-text-size-adjust: 100%
-webkit-font-smoothing: antialiased;
I have no explanation for this, just Googled it..
I've noticed a significant difference in rending of Open Sans (Google Web Font) from Chrome, to Safari/Firefox. I attach two photos, the first being chrome and the second safari.
All I have in the stylesheet is:
font-family: 'Open Sans', sans-serif;
font-size:14px;
Hope you can help, as I really like the chrome (first image) rendering but HATE the other one!!
Add to head
<link href='http://fonts.googleapis.com/css?family=Open+Sans:400,600,300' rel='stylesheet' type='text/css'>
CSS rule
.btn{
font-family: 'Open Sans', sans-serif;
font-weight:300;
text-rendering: optimizeLegibility;
font-size: .9em;
}
I've had luck in the past using font-weight: lighter!important; on fonts that appear bolder and completely different than what they are intended to look like. Each browser interprets fonts differently. Google Web Fonts tries its best to serve the correct versions, but sometimes there are drastic changes between browsers and operating systems.
Hope this information helps! Let me know if this solution works, otherwise I can look into it further. Open Sans is a nice font for web, nice choice :)
I added directly this line im my header and it's working!
<link href='//fonts.googleapis.com/css?family=Open+Sans:300,400,600' rel='stylesheet' type='text/css'>
.nav > li > a {
color: #000; font-size: 13px; font-weight: 600;
}
Instead of just calling the font without sizes in the Header and defining it afterward as bold, a method who doesn't work.
There is an issue where Safari renders fonts at fixed sizes and other browsers render them more exactly:
example at tech.Ozake.com
So if you request your text to be a size that falls between two of Safari's steps, you will get a different result in Safari than in other browsers.
So depending on how you declare the font sizes and how the window is sized, you will get differently-sized results.
This workaround helped me to make Open Sans to look very close in different browsers.
<script>
function loadCss(path){
var fileref=document.createElement("link");
fileref.setAttribute("rel", "stylesheet");
fileref.setAttribute("type", "text/css");
fileref.setAttribute("href", path);
document.getElementsByTagName("head")[0].appendChild(fileref);
}
if (ViewUtil.isChromeBrowser()) {
loadCss('https://fonts.googleapis.com/css?family=Open+Sans:400,600');
} else {
loadCss('https://fonts.googleapis.com/css?family=Open+Sans:300,600');
}
we are forcing a bit 'bolder' version of font for chrome
You apparently didn't reset the default browser CSS, try setting font-weight explicitly.