思洋互动网站建设学前班

@font-face 属性

使用文本替换技术嵌入字体经常很费时并且显得不自然，因为设计师必须把字体嵌入Flash 影片中，或者使用服务器端的类库生成嵌入版面的图片。这些技术的不利方面是，它们通常依赖浏览器对JavaScript 的支持，这在实际中很难控制。很显然，使用纯CSS 对本地字体的支持将会是一个更可取的、更自然的解决方案。这正是CSS3 网站字体模块@font-face 属性所支持的。

使用@font-face 嵌入字体要通过两步完成。第一步是把一个新的字体加入样式表中的可用字体列表。这通过使用@font-face属性完成。

广州网站建设,网站建设,广州网页设计,广州网站设计

1. @font-face {  
2. font-family: MuseoSans;  
3. src: url('fonts/museo_sans.otf') format ("opentype");  
4. font-weight: bold;  
5. } 

在这个例子中，设计师声明Museo Sans 是一种用来在浏览器中显示文本的可用的字体。接下来的第二步，是设定一个文本元素，使用刚才声明的字体，我们在常规的CSS 声明中使用字体，如下所示。

1. h1 {  
2. font-family: MuseoSans, Arial, sans-serif;  
3. } 

浏览器将会载入museo_sans.otf 字体文件，并用它来显示h1 标题。如果浏览器不支持@font-face 属性，它就会被忽略。要注意只有可以免费获取的字体才会被上载到服务器，因为这些文件不仅仅对浏览器开放，也对用户开放，用户可以从服务器下载这些字体文件。字体的使用协议需要清晰地表述，该字体可以被使用在@font-face 属性中。

 

Typekit 是一种简单的解决方案，它提供仅限于网站使用的字体字体使用协议的链接，允许你在布局中嵌入商业字体（图片由Andy Clark 提供）。

还可以选择Typekit或Fontdeck，这两个服务提供了一种简单的解决方案，它们通过提供仅限于网站使用的字体使用协议的链接，允许你在布局中嵌入商业字体。字体文件，或者某种字体不同重量的字形，被存储在第三方的服务器上，设计者向Typekit提交租用（而非购买）协议。关于付费，设计者会被给与一个包含在页面上的JavaScript 文件，它可以和简单的CSS 一同使用。


广州网站建设,网站建设,广州网页设计,广州网站设计