在 CSS 裡自訂向量字型

No Comments / 4,228 views

Here is a simple example of how to use web fonts :

@font-face {
  font-family: "Kimberley";
  src: url(http://www.princexml.com/fonts/larabie/kimberle.ttf) format("truetype");
}
h1 { font-family: "Kimberley", sans-serif }

Those familiar with CSS syntax will recognize the last line. The @font-face construct may not be familiar, however it’s easy to explain: as the “Kimberley” font is requested, the font file is fetched from the specified URL. The syntax is described in the CSS2 specification.

To avoid long lists of @font-face declarations in the style sheet, they can be hidden using @import :

@import url(http://www.princexml.com/fonts/larabie/index.css) all;
h1 { font-family: Goodfish, serif }

The TrueType files used in the examples above are designed by Ray Larabie. He is a renowned font designer who has made hundreds of interesting TrueType fonts freely available for use on the web. His fonts are elegant, decorative, and playful.

Dieter Steffmann is another great font designer. He, too, has made many beautiful fonts available for anyone to use.

VN:F [1.9.22_1171]
Rating: 9.0/10 (1 vote cast)
VN:F [1.9.22_1171]
Rating: 0 (from 0 votes)
在 CSS 裡自訂向量字型, 9.0 out of 10 based on 1 rating

Post to Twitter Post to Plurk Post to Digg Post to Facebook

Facebook comments:

Leave a Reply

You must be logged in to post a comment.