I have read how chrome renders fonts and the differences between other browsers etc. But recently I came up with a interesting scenario.I have two files. One is a wordpress page where the font is used in header. Other is static html page with same code. On static html page the text Restaurant Appliance Parts appears smoothly. But same browser and wordpress page the font is pixelated. What could cause this problem?
Here is CSS:
font-size: 60px;
line-height: 70px;
font-family: Arial;
Here is the image showing the problem.IFyou notice p and n and a you can see pixelated.
Here is the demo - HTML File:
http://restaurantapplianceparts.com/dev/wp-content/themes/vizio/test.html
Wordpress page: http://restaurantapplianceparts.com/dev/
I am using chrome on windows.
Regards
Ahmar
If we zoom-in the screen-shots (making sure that we do not resample the images) we can see that both sites display the same font, with the same colour and an appropriate anti-aliasing:
I suspect that this is nothing but a visual effect caused by the different decisions taken by the font rendering software when faced with identical texts in different contexts. For instance, the first sample fits exactly in a horizontal baseline but displays more artifacts in vertical lines. But they both look correct solutions to smooth text; it's only that human brain finds one of them more comfortable.
Apparently, there used to be a -webkit-font-smoothing CSS selector in Chrome but it's no longer available.
Related
I am working on a site, and just recently, the social media icons are no longer appearing on the site, they are just boxes. The site in question is sccds.org.
They were working a couple days ago, and nothing was updated (It's a wordpress site) when they just suddenly stopped showing up. The link used to serve the css is the same as it used to be, the icons are the same with the same classes, the plugin used to display the icons is the same, everything is the same, but for some reason, the icons themselves will no longer display.
There are no errors in the console and nothing is failing to load, so I am at a loss as to how the icons can just suddenly no longer show up. Any help with this is appreciated.
First thing to check is your styles. Some of the icons require a particular font-weight. Recently, I added a rule to my stylesheets which broke several icons I was using (and they were being rendered as boxes).
.fas, .far, .fab { font-weight: normal; }
Once I removed that from my css, the icons showed up properly.
I have one very surprising issue with Google Fonts. This is the site in question.
The title is normaly showing in one ligne but a friend of mine with the same Opera version like me sent me this screenshot. You can see that the title goes in two lines and brakes every think.
It's the first time I use Gfonts and must admit that there is another problem in Firefox too - the font appears so jagged!
Thanks for your advises!
The line break can be prevented simply by adding
h1 { white-space: nowrap; }
Font rendering depends on the font, on the font size, on the browser, on the operating system, on the device, their settings, and probably phase of the moon, too. Some fonts are more difficult than others, so the practical move is to pick up another font.
Unfortunately, not all browsers render all fonts exactly the same way. I guess your problem with the title in Opera is caused by the font being rendered bigger. You can try to target a specific stylesheet for Opera to solve that.
As for the jagged font, well... you have to deal with that, and choose fonts that will look sharp on every browser.
Take a look here : http://css-tricks.com/font-rendering-differences-firefox-vs-ie-vs-safari/
The jagged issue was solved thanks to this Joomla! extention - KC Cufón Font Replacement. A have included just the characters of my text - only 3KB of js and I left the same Google Web Font loading too in order the text to be shown until the extention loads.
I'm currently developing a site for my University's library, and a very strange issue came up. The font on the website, whether the live version or the one on my machine (not the server) is always smaller than it should be. This is only the case on two computers--my own, and my supervisor. It happens in all browsers. I'm pretty sure it's happening on both of ours because we've handled code, but I can't think of any CSS rules that would be affecting it. To make it worse, it's affecting two different CSSs--the old site (which I have not touched) and the new site which is intended to be rolled out tomorrow. I've tried fixing the way the computer displays fonts, the way browsers display fonts, changed the resolution, and tried zooming in. None of those methods worked. Also, other computers with the same resolution and monitors look at it just fine. No other websites that I visit have this issue. I'm stumped. Any ideas?
The site is here: http://library.uis.edu
Comparisons of the text can be seen here: http://imgur.com/a/Tb7Mv
I think this might be a font issue, rather then a font size issue. Myriad pro is not considered a websave font. As your machine and probabaly the one of your supervisor have probabaly Adobe installed, wich comes with Myriad, you are seeing the site in Myriad, while the other machines are seeing the site in Verdana. (not entirely sure though)
It looks like you are calling Myriad Pro as the first font. I have that font installed on my system, but you're calling the font size to be 75%, which on a font like Myriad Pro, will shrink it down considerably. If I clear the font-size, and font-family to just Verdana, it renders okay, but some of your elements such as the tabbed nav, would need to be addressed.
I'd stay away from fonts like that unless you are using #font-face and a web generated font pack. By choosing Myriad Pro as your font, you will only render that font on computers that also have the font. Consider using something like Google Web Fonts: http://www.google.com/webfonts/
Having fonts at the body level is fine, and cross fonts (headings versus paragraph) should be handled at a global level for those elements (not the body). Assume the body will take the bulk of the text in the body. You can define a standard font size such as 1.0em; at the body level if you wanted, and then define em sizes for other elements such as h1, h2 tags, and p tags if you don't want to use 1.0em from the body.
I have a page that is multi lingual and I have an issue with the Japanese version only.
For some reason in IE8, when I hover over an element, a sibling's font-size will increase/decrease.
Even stranger, is that this doesn't happen on every hover, sometimes I cannot reproduce straight away, I need to keep hovering over different elements in the same area of the page. Eventually this bug will rear its ugly head.
This bug only occurs on the Japanese page, all other languages seem to be fine.
This could be happening on other versions of Internet explorer, I haven't tested on all.
To clarify, I have not got any font-size changes on any :hover rules.
I work for a Japanese site and recently came across this issue. After spending more time than was reasonable, I found the answer from these detailed write-ups in Japanese:
http://freesoft.tvbok.com/sonota/ie8-fontsize.html
http://social.technet.microsoft.com/Forums/ja-JP/internetexplorerja/thread/70d700f4-0bda-48b1-9476-d31993b7cbf4/
The top link includes the ways to deal with it. For those who can't read Japanese I will summarize:
The problem only affects IE8 showing pages using the MS P Gothic font (generally the default Japanese font on Windows) at a font-size that is between 9px and 11px. Unlike many IE bugs, it has nothing to do with floats/margins/line-height/etc. As Oldie has pointed out, the bug is not consistent, sometimes it happens right away and sometimes it takes a few hovers, and it seems to enlarge/shrink the text randomly.
The three primary solutions are as follows:
Set the font to MS Gothic or some other Japanese font using font-family style.
Change the font size to be anything outside the 9px ~ 11px range (Under the default IE8 font settings, 1em sized text will not be affected, but slightly smaller text (eg, 0.8em) will be affected).
Force IE8 to display the page as if it was IE7 by adding the following in the header:<meta http-equiv="X-UA-Compatible" content="IE=7" />
I went with #2 because MS Gothic looked jarring next to all the other MS P Gothic text, and felt #3 had clear disadvantages for our site.
It's not an ideal solution, but it works. Best of luck.
I'm trying to use the MusiSync font to embed a sharp and flat symbol in a line of text. In order to keep these symbols from being tiny I have to make their point size twice the size of the rest of the text. Unfortunately, this messes up the line height in Internet Explorer and I cannot find a way to control it. You can download the MusiSync font at:
http://www.icogitate.com/~ergosum/fonts/musicfonts.htm
My attempt to use this font in a web page can be found at:
http://www.williamsportwebdeveloper.com/MusiSync.htm
I opened up Photoshop and used the font you link to. There is a huge amount of white-space above each glyph in the font itself. The font is poorly designed.
If you set your style to this, you'll see the issue:
.style2 {
font-family: MusiSync;
font-size: 24pt;
border:1px solid #000000;
}
The problem appears in FireFiox 3 as well, its just manifesting itself a little differently.
You may be able to hack your way around this somehow, but it's going to be ugly. Unless you're using a lot of different font sizes, you may be better of using images.
Seeing that you are trying to use a very uncommon font, why not implement sIFR?
It will (possibly) solve some of your line height issues as well.
Read up here.
sIFR is an excellent choice for non-standard fonts.
You embed the font in a flash movie (don't worry most of the work is done for you) and add a bit of code to your page and the sIFR javascript will replace classes/id/tags etc with a flash movie containing the text/font that you're aiming for:
From http://www.mikeindustries.com/blog/sifr/
A normal (X)HTML page is loaded into the browser.
A javascript function is run which first checks that Flash is installed and then looks for whatever tags, ids, or classes you designate.
If Flash isn’t installed (or obviously if javascript is turned off), the (X)HTML page displays as normal and nothing further occurs. If Flash is installed, javascript traverses through the source of your page measuring each element you’ve designated as something you’d like “sIFRed”.
Once measured, the script creates Flash movies of the same dimensions and overlays them on top of the original elements, pumping the original browser text in as a Flash variable.
Actionscript inside of each Flash file then draws that text in your chosen typeface at a 6 point size and scales it up until it fits snugly inside the Flash movie.
An excellent cross browser platform indepent solution for non-standard fonts.