I am trying to make text overflow being hidden in a td element on the page
using a custom dingbat font.
For some reason when I set overflow:hidden; the text simply disappears.
When I remove the font-face declaration, it works as expected.
I also notice that the font itself is shifted down in markup, which is not the problem for me, but it feels like a browser has hard time rendering it?
Here is the live preview.
Update:
As suggested by Stephen Thomas I tried running this example on different machines, and on Windows Vista it looks great on all major browsers (as far as I can tell). And it works for him on Mac OS. But it doesn't work well for me on Linux :s.
Also this custom font is shifted down on many browsers.
Related
I have the following issue:
I have this under construction state website, https://endertainment.com, it was build with PHP and MySQL from scratch, like any other I did. The issue is when you access the website from Mobile Safari or Safari the website doesn't show all the elements must show. When you access from Android (Any Browser) or Windows or even in Linux the website shows any element well. I already run test in BrowserStack and CrossBrowserTesting... in both shows the same result; the web didn't show properly. I already remove every flexbox property and use inline-block instead. For example, this other website (https://tuticketazo.com) is under construction state too and use the same structure of https://endertainment.com.
I already made tests changing the server folder the domain points; upload a simple html page from scratch, without PHP ; use without SSL... I think already test everything but in iOS Safari, Mac OS Safari and even in Chrome in MacOS shows the elements but not in the right way.
You should set line-height of your heading titles.
#MainTitles h1 { line-height: 50px }
#LangSelect a { line-height: 20px; }
But the problem is not inside these 2 rules. I didn't determinate full code of CSS, I just check small fixes for places which I saw broken
I found the problem and resolve the Issue.
OS X have a rendering issue with some fonts.
I start my research searching a common pattern, I has this issue with 3 websites:
Adjusting the line-height didn't work properly.
Change the ul from inline-block to flexbox, didn't work
The issue is present in any browser in Mac OS (I test Chrome,
Firefox and Safari)
Continue researching an I found some documentation about the issue.
I found this article
OS X type rendering - text baseline is shifted upwards, effectively no-longer centered vertically within the line-height
I test in the 3 different websites have the issue and VOILA!
Everything works fine now.
I used in the 3 websites the same fonts (the common pattern):
Gotham Book
Gotham Black
I can confirm this two fonts evoke the rendering issue in Mac Os.
The problem is solved right now.
Note: this issue is on windows.
I found that text my current website is shown different in Chrome and FF. The font is Verdana. The same word in FF look wider than in Chrome. I could not find the reason, so I start to search site that also use Verdana.
I found this site that uses Verdana for side navigation. The links look different in Chrome and FF as well. (Screenshot in chrome, in FF).
But then I found this site where text is also in Verdana. But on this site text looks the same in Chrome and FF?
Why this happens and how to make the Verdana text look the same in these two browsers.
UPD: I added the showcase in jsbin. (I thought that it was more real if I gave links to real site where you can see the problem). Open the jsbin file in Chrome and FF, run js and open console. You can see the width of the div with text in FF is 53 and in Chrome - 49.
The problem is you're scaling the font down to something very tiny, which is impossible to get right: each font engine will do pixel aligning differently, so Firefox, IE, and Chrome will all start to show different metrics the smaller you make things, because they all use different font engines.
Stick to the recommended minimum of 16px and higher and the browsers report the same dimensions; http://jsbin.com/caxasahacu/edit?html,css,js,console,output
(remember that not everyone has eagle-vision. For the vast majority of users, 16px is pretty much the smallest you can reliably make text before you're forcing people to zoom)
I am working on a project where client wants to use MotivaSans-Bold.
However on windows browsers it displaces text on twitter bootstrap enabled buttons but looks good on Mac browsers. But if I try to change padding it disrupts Mac browsers.
What can be the problem? Is there any problem associated with webfonts?
EDIT
#font-face {font-family: 'MotivaSans-Bold';src: url('webfonts/279BB3_D_0.eot');src: url('webfonts/279BB3_D_0.eot?#iefix') format('embedded-opentype'),url('webfonts/279BB3_D_0.woff') format('woff'),url('webfonts/279BB3_D_0.ttf') format('truetype');}
The problem is most likely that the spacing on the webfont is going to vary from browser to browser. What's probably going on is that on Chrome on the Mac the font and button look good, but then Firefox on Windows 7 the fonts renders slightly larger and throws off your button.
You should be able to address this with padding/margin via CSS as long as you don't try to set any fixed widths.
If you post a link to the page it'll be easier to suggest a more specific answer, but if the webfonts look relatively similar both Mac and Pc than there's nothing 'wrong' as far as the font goes and it's really a CSS issue.
I'm having some trouble with font's on cross-browser compatibility. FireFox and Chrome look virtually the same, maybe a bit smoother on FireFox, but on IE9 it seems condensed and a bit bolder? I've used every CSS value for font to try to set a default for every browser but nothing works. Any ideas what IE9 is doing to distort the font? I do like the way it looks in IE9 but I want it to match between browsers.
It's well documented here that IE9 ignores the OS-wide settings for font smoothing (aka anti-aliasing). Even if font-smoothing and ClearType are disabled in Windows, IE still shows anti-aliased fonts, which some users struggle to read, especially at small font sizes.
Microsoft says,
Internet Explorer 9 takes advantage of Windows DirectWrite and Direct2D APIs to render hardware-accelerated text using sub-pixel Microsoft ClearType font positioning. Recent enhancements to ClearType help improve the readability of text on liquid crystal displays (LCDs) by increasing the sharpness of the tiny details of displayed text. The implementation of sub-pixel positioning in Internet Explorer 9 is useful for web developers because text placement and line breaks will remain constant across different users' configurations
However, there are ways to disable this (mentioned here) but it is a client side technique and your code has no control over it.
The font rendering is dependent not only to the browser but also the operating system.
Please see the following two articles which are explaining the difference and what you can do with CSS to overcome it:
http://css-tricks.com/font-rendering-differences-firefox-vs-ie-vs-safari/
http://www.smashingmagazine.com/2012/04/24/a-closer-look-at-font-rendering/
So I'm front-end coding this flashy new start-up website and I am using a specific font. I am using #font-face, and the font shows in all browsers but some issues:
1) The font looks pixelated which makes it kinda ugly. This problem actually has happened to me before with other fonts so I will be happy if somebody recommends me how to get the font smooth.
2) In Opera and Safari the font renders normally (still pixelated) but in IE, Firefox and Chrome it renders bold, kinda bolder than normal. I tried putting font-weight but the font doesn't support any weight so it's normal. Any ideas on that problem ?
I really want this font and I can't understand how everybody is using font-face with all those rendering problems. I hope I am missing something.
Depends on what OS are you using since #font-face uses OS font rendering engine. On Windows XP just forget about getting it done right. Windows 7 does the job pretty much ok also in IE7/8.
One thing that can cause your fonts to look jagged can be the Cleartype options - turning it off fixes the edges since it won't do the extra anti-aliasing that is not needed since the embeded font is already anti-aliased.
One way to disable cleartype on the client side is to apply a IE specific filter: property (just use some simple property so it won't do anything except triggering the effect - like rotation by 0 degrees) to your headers in css - that causes IE to turn off cleartype to avoid conflicts between filter rendering and Cleartype rendering. But this will fix IE only.
There is also webkit specific -webkit-font-smoothing which works ok and might help you with chrome and css3 font-smooth (never used this one so can't tell you about results or supported browsers).
Most solid thing you could do, if you really want to keep your selected font, is to use Cufon or similar font replacer. From my experience it does the job with an extra script load.
Overall for #font-face there is no solid solution to get it look the same on all browsers and systems.