on air

CSS3 | {@font-face}Rule

back home » Web Tutorials » CSS » CSS3 | {@font-face}Rule.

Scenario.

It's been a long-time problem for webmasters, creating websites that look perfect, and acceptable on their computers. However, looking different on other computers, after they are published onto the internet.

The problem is, when the fonts, used during the creation of a website doesn't exist on the user's computer. The browser will specify a standard font, available on the client's computer for the website, and the whole of its fonts will be changed. This will totally change the whole layout.

The only possible way, avoiding this problem was to define "web-safe" fonts inside your document. And browsers can load them. [These are the standard fonts, available on most computers].

CSS3 | @font-face Rule.

With the @font-face rule in CSS3, fonts could be stored together with website's data, and browsers could load them whenever needed. Thanks to this solution, webmasters no longer have to get worried about defining "web-safe" fonts. However, pointing to the stored fonts on their server using CSS for simplicity.

See the illustration below.

<html>
<head>
<style type="text/css">
@font-face{
font-family: myStaticFont;
src: url('FontBase/Static_Font.ttf')
,url('FontBase/Static_Font.eot'); 
/* Intternet Explorer */
}

h1
{
font-family:myStaticFont;
}
</style>
</head>
<body>
<h1>myStaticFont will format all h1s</h1>
<p>Internet Explorer supports only
 .eot font extensions.</p>
</body>
</html>

Explaining The Script Above.

The @font-face defines the CSS rule.

The font-family: myStaticFont; adds a font file from a specified location.

The src: url ('FontBase/myStaticFont.ttf') specifies the location of the font to be used.

The location of the font file can be defined absolutely or relatively.

Now you can define a declaration for an HTML element using the specified font-family name above, and all of its content will use the defined font within.

Browser Support.

The @font-face rule in CSS3 is supported in all browsers when used with .ttf font extension.

Only internet explorer doesn't support the .ttf font extension. However, it supports .eot font extension.

CSS 3@font Face Rule.

CSS3 Tutorials.

Top Articles.

Clicks4UrMind

Man will give you worldly powers, and make you feel on top of all, note this is temporally and could be redrawn at anytime sending you back to the ground floor of life. However, the Lord Almighty, the one and the only rightful ruler of the Universe, blesses everlastingly.

Brain

Knowledge is Power, but Power is not Knowledge. Wisdom is the truthful Power that identifies the Knowledge within the man. And only, I repeat 3x. Only the almighty God has the power to bless the man with his Wisdom forever.

To achieve the Lord's blessings, cease not praying daily, asking for his Wisdom, and you'll be blessed abundantly...

SPYERA PHONE

Spyera Phone

Spyera Phone version is software that you install on a smart phone to monitor everything happening on the phone. After installation, SPYERA secretly records events (sms, call history, phone book, location, emails, What's App messages, IM, Facebook Chat, Skype, See photos taken and many more...) that happen on the phone and delivers these information to a web account, where you can view these reports 24/7 from any Internet enabled computer or mobile phone. SPYERA also allows you to listen to the surroundings of the target mobile , listen to the phone conversation and to know the location of the device.

Please, Kindly Donate What You Can, Enabling Us Pay Hosting And Domain Costing, And Do More.

Please Donate