Fonts looking different in Photoshop and Browsers [duplicate] - css

This question already has answers here:
Closed 11 years ago.
Possible Duplicate:
Photoshop Mock Up Font isn't same as in HTML
Hi,
I have spent last 2 hours looking for a way to make fonts, in my case Arial, look identical to what they look like in photoshop. I mean I can't use a different font, it must be smooth Arial. While fonts with no anti-aliasing look decent and almost identical in most of the browsers compared to what they look like in photoshop, I can't think of a solution to mimic smooth anti-aliasing (and others as well, but it is not that crucial for them).
Is there a way?

You can use something like sIFR or typeface.js.

Related

CSS to emulate print scaling in chrome

I have a large number of template files I am printing with Chromium. They all rely on the same CSS file. On a good number of them I need to just make everything a little smaller. If I adjust the scale in Chromes print options to 75% I get the desired result.
I need a way to get a similar result in CSS?
The only browser compatibility I need is Chrome.
This question was asked before, but wasn't really answered as the person asking the question was only using this as a workaround and found a better solution to the problem. In my case I really want to know the answer to the asked question.
Css to emulate scaling in Chrome
I have tried all the suggestions proposed in this post and none of them worked.

using a div to blur an image behind it? [duplicate]

This question already has answers here:
How to use CSS (and JavaScript?) to create a blurred, "frosted" background?
(10 answers)
Closed 9 years ago.
Is it possible to code a div to enable it to blur whatever image is under it?
something like this:
Could this be done somehow with -webkit maybe?
Not with CSS on its own, but you can pull a similar effect off with Canvas and the StackBlurforCanvas library. See this
UPDATE: Looks like backdrop-filter was recently introduced to Webkit nightly, so eventually we'll be able to do this with CSS only. Yay!
Unfortunately this can't be done purely using CSS. Although webkit-filter supports blur, it doesn't support blurring anything other than the element that it applies to.
There is a more hacky way to do this, described here - http://css-tricks.com/blurry-background-effect/

Browser specific prefixes necessary CSS? [duplicate]

This question already has answers here:
What is the purpose of CSS prefixes? [duplicate]
(3 answers)
Closed 9 years ago.
I've always been wondering this: why are browser-specific prefixes necessary in CSS? Why can't all browsers use the same thing? What's stopping them from using a single standard?
(I might just be hopelessly naive here.)
These things are usually not (yet) an official standard, and the syntax may change in the future. For example, it happened with linear gradient and flexboxes. So the short answer is to avoid collision.

Generalizing INPUT fields cross-browser [duplicate]

This question already has answers here:
How to align checkboxes and their labels consistently cross-browsers
(40 answers)
Closed 9 years ago.
Is there a CSS (non-javascript) way to make input fields (text/textarea/password) shown the same way cross-browsers (from IE7+ and all other common browsers (safari, chrome, firefox)) ?
There is some great code you should check out. It has a polyfill for older browsers, but it will make all of your form fields look pretty close. You can use just the CSS portion and it is still pretty awesome. It's called Formalize. It is not identical in every browser but it's pretty close.
If you are worried about pixel perfect similarity you will have to use a javascript like Select2 or Chosen since select fields are usually the elements that vary the most between browsers. You could also take a look at Twitter Bootstrap. They already have a lot of work done for you. Good luck!

Custom font being cut off on webpage [duplicate]

This question already has answers here:
Chrome cut off Oswald-Light font
(4 answers)
Closed 9 years ago.
Here's a page showing my problem:
http://coreyyoungcorp.com/font-issue/
I have no idea why it's being cut off. It's not a line-height issue nor a font size issue, but I can't for the life of me figure out why on earth it's happening, and only with this font "Oswald".
Anyone have a clue?
Your "Light" and "Bold" fonts are the problem. Take a look at http://jsfiddle.net/FHCXf/1/
This is a known issue with Chrome on Windows for Oswald fonts and similar font families.
Changing the font-weight property to normal works sometimes, but it defeats the purpose if you have a bold or light font style.

Resources