CSS3 @font-face
- The term web fonts generally refers to the use of @font-face.
- @font-face allows you to specify which fonts are used within your site.
- it eliminates the need for clunky and complicated workarounds.
@font-face Syntax
@font-face {
font-family: "My Font";
src: url("_assets/myFont.eot");
}
@font-face declarations are made at the top of stylesheets and give the user agent information needed to access and reference the font. In our sample rule, @font-face is used as the selector, and individual declarations are contained inside the rule’s brackets.
Font-family declaration: this defines a literal string which can then be referenced by font-family declarations when building font stacks.
Source declaration: This specifies the resource containing the font data. Usually a path to a font, although it can also contain links to external services. This declaration can also be a comma separated list that provides alternate resources for multiple devices.
Cross – browser Syntax
@font-face {
font-family: 'Graublau Web';
src: url('GraublauWeb.eot');
src: local('☺'),
url("GraublauWeb.woff") format("woff"),
url("GraublauWeb.otf") format("opentype"),
url("GraublauWeb.svg#grablau") format("svg");
}
- Declare the font-family as you would normally.
- Declare source for .eot font for Internet Explorer.
- Smiley face keeps local font matching issues from occurring.
- “Format/URL” syntax keeps Internet Explorer from downloading resources while other browsers continue until they find a supported font.
Things to consider in using web fonts
- Carefully consider how they are going to impact your design before using them.
- Adds overhead to your site because this font resources need to be downloaded.
- Heavy usage of web fonts often can cause a noticeable delay in the font rendering.
- Make sure to test your design in several browsers.
Text Shadows
Text Shadow is broadly supported without the need for vendor prefixes, so text shadow is definitely one of the CSS3 techniques that we can use today.
text-shadow: 1px 1px 3px #888; /* FF3.5+, Opera 9+, Saf1+, Chrome, IE10 */
First value is the x-offset it will move the shadow 5px over to the right. Second value is the y-offset it will move the shadow 5px down. Positive values will move the shadow to the right and down, Negative values will move it in the opposite direction. The third value is the level of blur. And the fourth value is the color.
Multiple Shadows
text-shadow: 0 0 2px #FFF, 0 0 5px #DDD, 0 0 10px #CCC;
The last one that you declare will be applied at the bottom. So the last is going to be really blurry with a darker gray color then it gets brighter as it goes inwards giving the illusion of a neon glow.
Sir, what is better?
Use @font-face, upload 4 fonts for cross-browser compatibility or use an image, in a sprite probably.
Thanks.
It depends on the strictness of your requirement and browser support within your target audience, especially if you want to support mobile devices. Some of the benefits in using @font-face is its easier to maintain because you only need CSS to scale and style it and also 100% SEO friendly. But if you really need to make your text look exactly the same in all browsers and operating systems use an image replacement technique.