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
}
Related
the site is https://mizore.site
on safari, the font-size is too big
img
on other img
It's only happend on ios safari, It display correctly on ipad safari, ios's other browsers.
I have no Mac, so I use inspect.dev to debug it, found the p font-size is 24px
inspect.dev debug img
Hope anyone can help me!
I think you need this in the CSS
html {
-webkit-text-size-adjust: none; /* Prevent font scaling in landscape */
}
I have a problem with blurry images on my site. I found a few solutions, but only
img{
-webkit-transform: translate3d(0,0,0);
transform: translate3d(0,0,0);
}
worked for me.
When I apply this css all images are shown nice, but the problem is that then all text becomes blurry.
Is there any way to avoid that?
In order to stop your images from being blurry; make sure they are of a high resolution, if you are using low res images they will display blurry on your webpage, also make sure you are not declaring a width and height that is causing them to be blurry. In order to display smoother/less blurry font in the browser try the following;
-webkit-font-smoothing: antialiased; //webkit browsers
-moz-osx-font-smoothing: grayscale; //firefox/opera
text-rendering: optimizeLegibility; //all other browsers
Try also using transform: translateY(-51%)
I am using a custom font for a image slider in SharePoint 2010. For some reason when the size of the font is anything bigger than 12pt, the font is pixelated and is not sharp in IE 8.
CSS:
#font-face {
font-family: 'MyriadPro';
src: url('http://insidedev:1000/fonts/myriadpro.otf'); /* IE9 Compat Modes */
src: url('http://insidedev:1000/fonts/myriadpro.otf?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('http://insidedev:1000/fonts/myriadpro.otf') format('otf'), /* Modern Browsers */
}
#slider div.mc-caption {
font: 13pt bold 'Arial Rounded MT Bold', Verdana, MyriadPro;
color:#FFFFF;
z-index:4;
text-align:left;
background:none;
margin-left: 10px;
}
#slider div.mc-caption a {
color: #354B9A;
font: 13pt bold 'Arial Rounded MT Bold', Verdana, MyriadPro;
}
#slider div.mc-caption a:hover {
color: #E8620E;
font: 13pt bold 'Arial Rounded MT Bold', Verdana, MyriadPro;
}
I was trying to originally use a custom font, MyriadPro but that did not seem to be being used in my image slider. With the above CSS, the caption looks like this:
Any idea what is causing this? How do I fix it, please let me know.
I was able to solve my problem by using ClearType for older version of IE8 that displays the pixelated font.
First, what is ClearType?
Think of those jagged edges you often see in text on a computer
screen, especially any flat-panel. Well, there’s a bit of code in your
operating system that attempts to clean up those edges by using
anti-aliasing at the sub-pixel level to visually smooth out those
rough edges, making the text easier to read. Essentially, it aims to
make on-screen text appear more like printed text.
But, here’s where our problem lies. Animating text with JavaScript
(especially in jQuery) overrides the ClearType feature by telling the
browser to display each step of the pixel throughout animation. When
the animation completes, its left displaying the final step without
ClearType enabled, leaving the text looking a bit crappy. Functions
like fadeIn() and fadeOut() usually trigger the override and cause the
pixel problems. (dauid.com)
An example of JavaScript/JQuery that causes ClearType issue:
$("#div").fadeIn();
To get around the issue, especially for older browsers, you have to remove the filter attributes like this:
// This fixes the ClearType issue in jQuery
$("#div").fadeIn(function(){
this.style.removeAttribute("filter");
});
// This fixes the ClearType issue in animations outside of jQuery
document.getElementById("#div").style.removeAttribute("filter");
Hope it helps others who are experiencing the same issue.
Set the background colour of the link text to match what is behind it.
#slider div.mc-caption a {
color: #354B9A;
font: 13pt bold 'Arial Rounded MT Bold', Verdana, MyriadPro;
background-color:??????
}
I'm looking to recreate the "Sign in to iCloud" text on http://beta.icloud.com
I have already copied all the styles attributed to that line of text, and everything is in order apart from the thickness of the text. I see Apple has applied the font-weight 300 to the style, which should and does make it thinner, however when I copy and paste the exact same code my browser renders it thicker on my own webpage. My question is, how is Apple making the text thin like that or how can I achieve the same effect?
The code from them that I have used so far is:
position: absolute;
color: #FFF;
left: 0px;
right: 0px;
height: 40px;
top: 131px;
font-size: 35px;
font-family: "Helvetica Neue",sans-serif;
font-weight: 300;
line-height: 1.2;
-webkit-font-smoothing: antialiased;
Any ideas on what could be causing it to render at normal thickness? I have no conflicting styles and this is the only code relating to my line of text
Using the CSS given I can get the same style as on iCloud website. (http://jsfiddle.net/LeBen/WznR5/)
After font-weight, the property that can slightly change the appearance of text on webkit browsers is -webkit-font-smoothing: antialiased;. If you don't use it, the browser fallback to the default smoothing mode (subpixel-antialiased) and result in a text looking bolder.
Are you sure you've included it in your tests and your browser apply it?
Try Avenir Ultra Light it's a thin font that looks similar to it
http://www.typophile.com/node/42590
I have my site how I like it, cross browser, although I have letter-spacing in CSS, but in safari it does not understand what I have, it ruins the design - any advice? Here is the CSS:
body
{
margin: auto;
font-family: 'Lato';
letter-spacing:0.50px;
font-size: 14px;
color: #999;
font-weight: normal;
}
It seems it doesn't give it any. It works fine in Mozilla Firefox
Webkit browsers (Safari, Chrome) round differently than Gecko (Mozilla). Thus, use 1px instead of 0.5px, as Webkit will round down to 0 while Mozilla will round up.
Chrome/Blink has fixed this issue some time ago so this should work on current stable version: http://src.chromium.org/viewvc/blink?view=revision&revision=153727
Webkit just fixed this, so you will have to wait a little to have it working on safari and other webkit based browsers:
http://trac.webkit.org/changeset/161521