Tag: font预览模式: 普通 | 列表

Google Font API  实现网页个性化字体服务

Google Font API  实现网页个性化字体服务
也就是说,一般在制作网页时,不能使用个性化字体。因为制作者电脑中有该字体
而网页浏览者电脑中不一定有,就会导致个性化字体直接还原成默认字体,那么使用的字体效果就会消失。
Google Font API  是现在最简易使用的解决个性化字体方案
只需要讲CSS代码导入我们的制作文件中,就能使用个性化字体了,所有用户都能看得到。
Google Font API  地址:http://www.google.com/webfonts

进入该网站后,有3种字体预览模式。
Word(词) / Sentence(句) / Paragraph(段)
随便你选择一种你喜欢的预览模式。
Word(词) /


Sentence(句) /


Paragraph(段)/


然后找到你喜欢的字体了吧,在每个字体下面有有个“单框向右的箭头”
英文标注Qucik-use,恩点他就是了。
“双框向右上的箭头”你可以预览他设计的每一个字体样式。
“Add to collection”可以添加到收藏。
因为我们要应用字体,所以我们点Qucik-use(“单框向右的箭头”)。


这个时候,我们可以看见,浏览器左下角有"Standard""@impoet""Javascript"选项。
这就是要导入网页字体的方法了,大家可以选择一种,这里我选择导入CSS的方法
把下面的代码拷贝到要制作的网页的<head> </head>中。



例如:我选择了3种字体分别导入到我要制作的网页中,在CSS中代码如下:


然后,我们就可以来使用这些字体了。字体是下面的代码。如下图
同样需要我们拷贝粘贴到要制作的网页中的CSS文件中
刚才是导入字体样式,现在要将字体运用在网页的某个部分的字体样式上。



我们分别在3个DIV标签中使用了3种字体。


<style type="text/css">
@import url(http://fonts.googleapis.com/css?family=Cabin+Sketch:700);
@import url(http://fonts.googleapis.com/css?family=Nothing+You+Could+Do);
@import url(http://fonts.googleapis.com/css?family=Syncopate);

body {
    margin: 0 0 0 0;
    padding: 0 0 0 0;
    background: #FFF url("bg.jpg");
    color: #666;
    cursor: crosshair;
}
div#container h1 {
    font-family: 'Cabin Sketch', cursive;
    font-size: 36px;
    height: 38px;
    margin: 0 0 0 0;
}
div#container h2 {
    font-family: 'Nothing You Could Do', cursive;
    font-size: 25px;
    text-transform: lowercase;
    margin: 0 0 0 0;
}
div#container #footer p {
    font-family: 'Syncopate', sans-serif;
    font-size: 12px;
}
</style>



OK,这就行啦,就能使用字体了。

效果如下:



当然,汉字的暂时没有这样的服务哇。如果需要汉字的,可以使用别的方法或自己制作,方法一样。

案例请参考:http://www.xjw.name

链接篇文章:•如何在网页设计中使用个性化字体(非GOOGLE)
http://www.qianduan.net/how-to-use-personalized-fonts-in-web-design.html

原创文章,转载请注明出处:http://www.xiejiwu.org/article.asp?id=101

查看更多...

Tags: Google api font

分类:Work__ | 固定链接 | 评论: 1 | 引用: 0 | 查看次数: 2792