standard font to a website?
Is there a way to add some custom font on website without using images, Flash or some other graphics?
For example, I was working on some wedding website, and I was finding a lot of nice fonts for that subject, but I can't find the right way to add that font on the server, and how do I include that font with CSS into the HTML? Is this possible to do without graphics?
This could be done via CSS:
<style type="text/css">
@font-face {
font-family: "My Custom Font";
src: url(http://www.example.org/mycustomfont.ttf) format("truetype");
}
p.customfont {
font-family: "My Custom Font", Verdana, Tahoma;
}
</style>
<p class="customfont">Hello world!</p>
It is supported for all of the regular browsers if you use TrueType-Fonts (TTF) or the Web Open Font Format (WOFF).
You can add some fonts via Google Web Fonts.
Technically, the fonts are hosted at Google and you link them in the HTML header. Then, you can use them freely in CSS with @font-face (read about it).
For example:
In the <head> section:
<link href=' http://fonts.googleapis.com/css?family=Droid+Sans' rel='stylesheet' type='text/css'>
Then in CSS:
h1 { font-family: 'Droid Sans', arial, serif; }
The solution seems quite reliable (even Smashing Magazine uses it for an article title.). There are, however, not so many fonts available so far in Google Font Directory.
The way to go is using the @font-face CSS declaration wich allows authors to specify online fonts to display text on their web pages. By allowing authors to provide their own fonts, @font-face eliminates the need to depend on the limited number of fonts users have installed on their computers.
Take a look the following table:
As you can see, there are several formats that you need to know about mainly due to cross-browser compatibility. The scenario in mobile devices isn't much different.
Solutions:
1 - Full browser compatibility
This is the method with the deepest support possible right now:
@font-face {
font-family: 'MyWebFont';
src: url('webfont.eot'); /* IE9 Compat Modes */
src: url('webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('webfont.woff') format('woff'), /* Modern Browsers */
url('webfont.ttf') format('truetype'), /* Safari, Android, iOS */
url('webfont.svg#svgFontName') format('svg'); /* Legacy iOS */
}
2 - Most of the browser
Things are shifting heavily toward WOFF though, so you can probably get away with:
@font-face {
font-family: 'MyWebFont';
src: url('myfont.woff') format('woff'), /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
url('myfont.ttf') format('truetype'); /* Chrome 4+, Firefox 3.5, Opera 10+, Safari 3—5 */
}
3 - Only the latest browsers
Or even just WOFF.
You then use it like this:
body {
font-family: 'MyWebFont', Fallback, sans-serif;
}
References and Further reading:
That's mainly what you need to know about implementing this feature. If you want to research more in the subject i'll encourage to take a look at the following resources. Most of what i put here is extracted from the following
上一篇: 如何使用Sublime Text 2重新格式化HTML代码？
下一篇: 标准字体到网站？