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;
}
Related
I am in a bit trouble now, because my design were accepted by the client and I've just started sitebuilding, when it came clear there is something wrong with my font set (Source Sans Pro).
Here it is: first image is my design, second is the live page:
On the third one, which is not the proper font weight, illustrates the probem better (the red text on the bottom). It looks like the font is not anti-aliased at all, all the strokes are 1 OR 2 px width, which makes the letters 'S' or 'G' ugly as hell.
It seems something is wrong with rendering, but I can't figure it out how to fix it. On the css side, I don't use anything special, here is the relevant code:
font-size: 13.5px;
font-weight: 900;
font-family: 'Source Sans Pro', sans-serif;
Also, I am using Google Fonts, by linking it this way (using latin-ext to get Hungarian chars):
<link href='http://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,600,700,900&subset=latin-ext' rel='stylesheet' type='text/css' />
I have tried the following, without any success:
-webkit-font-smoothing: antialiased;
text-shadow: rgba(0,0,0,.01) 0 0 1px;
I did some research with the following one, which made a difference, but actually it the wrong direction:
-webkit-text-stroke: 0.35px;
So I am more concerned that this is a font-related issue rather then a browser-related one, but I don't know how to start.
Anyway, I would really appreciate if someone can help with this, because other ways my client will refuse the font, and I have to start over the whole thing.
Thanks!
Deleting WOFF2 as the #font-face src: significantly improved look. For the given screenshots it's not so obvious for the bolder text but in fact it looks better. For the lighter text the difference is drastic.
Browser: Chrome 80.
I'm working on a project where the height of the content container is limited, and on a few select browsers (mostly Chrome on Android) the text seems to be breaking in different places, even though almost all font properties seem identical, so far I've checked:
Width of the container element
font-size
line-height
font-family
letter-spacing
All of which are identical, both in their given and computed values.
This wouldn't usually be a massive problem, but because of the content container height constraint, these discrepancies are causing me a massive headache.
I've managed to replicate the problem in a fiddle with the following code:
HTML
<p>We are not able to sleep or We cannot sleep.</p>
CSS
p {
font-family: "Times New Roman", serif;
font-size: 11px;
font-style: italic;
letter-spacing: 0;
max-width: 200px;
}
The text in this example renders on one line in the majority of browsers, however in some the last word "sleep." appears on a new line.
You can see screenshots of this example in a number of different browsers at:
http://www.browserstack.com/screenshots/cf75bb4fa9a22db2e660a0073698be86b55becb6
Is there something I'm missing here? Is there any way to ensure the text will render in the same way accross a number of devices and browers?
The details of font rendering vary by browser and platform, and they cannot be controlled in CSS. Besides, different computers may have (slightly) different fonts under the same name, or e.g. lack Times New Roman entirely (most smartphones lack it, for example).
As a workaround, if specific line division is crucial, consider writing the text as preformatted (i.e. dividing it into lines in HTML source the way it should appear in display) and using white-space: pre. The drawback is that some lines might hit or even cross the right edge of the area reserved for the element. But if you do not set a background or border, this will be barely noticeable.
I'm afraid that the only solution here is using an image using width="XXX" or tell the client that is completely impossible to make a web identically on every browsers unless you use disgraceful methods just like using an image instead of text.
I was able to solve the problem in my browser by replacing the max-width with min-width see this http://jsfiddle.net/79j57L8L/4/
p {
font-family:"Times New Roman", serif;
font-size: 11px;
font-style: italic;
min-width: 200px;
}
It's been a while (2 years?) since I've done a bigger website. I'm now developing one and as usual, I ran onto some cross-browser difficulties.
The problem I'm solving now can be seen on the picture below - I have a page with a h2 element, which displays differently in Chrome and IE 11. The element has all the properties like line-height, font-size, padding, margin and so fort specified, but still displays differently. In one browser, the text is right on the top of the element, in the other one, it is in the middle. This causes some graphical issues and I can't seem to find a way to resolve this without writing a browser-specific css definition for each browser (Firefox does something similar to and is somewhere in the middle of these two - the text is in the upper part of the element, but not on the very top of it).
The other similar elements like h1 are affected as well.
I understand this is likely related to the way these browsers handle fonts and calculate their positioning, but at the moment, this doesn't help me much. I'd be grateful for any advice you might have, since I'm probably not the first one to be solving this.
EDIT:
I won't insert the HTML code here since this affects all these elements regardless of where they appear. For an instance, the text highlighted in the page is a normal h2 with the following CSS attributes:
color: rgb(0, 0, 0);
display: block;
font-family: 'Myriad Pro', Arial;
font-size: 22px;
font-weight: bold;
height: 27px;
margin-bottom: 0px;
margin-top: 20px;
text-transform: none;
width: 634px;
normal has this css:
font-size: 14px;
margin-top: 10px;
margin-bottom: 12px;
line-height: 17px;
So I've found a solution. Little surprising, but makes sense.
I'm using Typekit from Adobe, which is something like google fonts. I actually found out that the cause of this text-shifting is the fact that I'm using the typekit font. When I switched to Arial, everything was fine.
I also came acrticle which describes the topic: http://blog.typekit.com/2010/09/13/updating-vertical-metrics-for-cross-platform-consistency/
The problem has to do with baseline and em boxes set wrong in the given font I used. Switching to another font which had these properties set correctly fixed my problem.
Thanks for all your help guys.
I've been having this problem for a while now, but I notice a lot of websites seem to have a very ... it is hard to explain, their fonts have a sort of "strength" to them. Like a bold, crisp, sharp definition. For example, I cite this page:
CSS-TRICKS
The way it looks comes out beautiful; Even the image that I embedded here does not do it justice. Spending time, I traced the exact font, exact settings, EXACT everything - I tried to reproduce it, but I get a COMPLETELY different result, even in the same browser.
Using the same font, same size, same everything I know of to match, this is how it looks on my end.
The specific code I am matching is the font, sizing, weight, and line height; which is;
#import "http://fonts.googleapis.com/css?family=Noto+Sans:400,700,400italic";
html {
font-family: 'Noto Sans', sans-serif;
font-size: 17px;
line-height: 1.5;
}
I have attempted to dig deeper, and using FireFox I found a bit more context, I tried emulating that as well with some more specific code it serves up; Which is...
#font-face {
font-family: "Noto Sans";
font-style: normal;
font-weight: 400;
src: local("Noto Sans"), local("NotoSans"), url("http://themes.googleusercontent.com/static/fonts/notosans/v4/LeFlHvsZjXu2c3ZRgBq9nD8E0i7KZn-EPnyo3HZu7kw.woff") format("woff");
}
But that continues to deliver the same results.
This is true of almost every time I have ever tried to reproduce that crisp feeling from production websites - and I literally have no idea what is going on. Can anyone explain to me why my fonts never match up with these sites, even using the same code?
Using Firebug, can you confirm that the #import CSS is actually being fetched over the network?
Here's what the Firebug console looked like for me when I tried this in a simple test page that rendered the font just fine on my system: (I'm not allowed to post images yet but you can see the screen shot here: http://i.imgur.com/PW8nU3L.png)
Here is the HTML I was testing with:
<html>
<head>
<style type="text/css">
#import "http://fonts.googleapis.com/css?family=Noto+Sans:400,700,400italic";
html {
font-family: 'Noto Sans', sans-serif;
font-size: 17px;
line-height: 1.5;
}
</style>
</head>
<body>
Hello, world
</body>
</html>
The other thing you might want to check is if it's browser-specific, i.e. does this work okay with Chrome?
I have a TEXTAREA where spacing is very important. I formatted it as follows:
TEXTAREA {
font-family: Tahoma, Arial;
font-size: 8pt;
letter-spacing: 0px;
line-height: 13px;
}
How, if I enter some text, the line height is not correctly applied: The last line of every paragraph (before pessing enter or shift-enter) is one pixel to high:
This problem only occurs in Internet Explorer 9, not in Firefox 7 or Chrome 14 (haven't tested older versions so far).
Is there a way to get rid of thad?
BTW: It does not happen for the last line of the textarea, unless there is a linebreak behind it.
Regards,
Steffen
I know this may not actually help entirely nor be the full answer, but it may be worth while reading up a little on the use of !important declaration within CSS.
http://www.impressivewebs.com/everything-you-need-to-know-about-the-important-css-declaration/
The only reason why this springs to mind is there may be another style/declaration that is applied after which is causing some sort of problem and this will make sure your textarea has the correct styles applied to it.
You may also want to check that any <p> CSS declarations are not causing conflicts/problems with any bottom or top margin's/paddings? Same goes with span or any other styles that could potentially cause some sort of problems.
Like I said, I'm aware this may not help in the slightest but it could be a possibility.
I have had similar problems with the last line in a textarea in IE8. When my textarea had a line-height of less than 18px, the cursor changed the line-height. The reason I bring this up is your line-height of 13px is quite small. You may want to experiment with larger line-heights to see if the problem goes away.
I just went many many rounds with this issue and finally discovered that IE9 is adding extra padding to textareas. Line height, height, etc had no effect. This did the trick:
padding: 0px !important;