如何让没有安装网页中所需字体的用户也能得到一致的浏览效果【转】

时间:2024-02-19 10:44:55

   今天给大家谈一个关于字体的话题,我们在做项目的过程中会遇到一些在psd中的字体在自己的电脑中没有安装,或者是一些特殊的文字,通常的做法是把它切成图片,但是如果这个站是多个语言的,那我们是不是把每个语言的都切一张图片呢,这样做不仅工作量很大,而且在后期维护的过程中可能会很麻烦,那我们应该怎么做呢。今天给大家介绍一种方法:
首先、
先要把所用的字体下下来,我们可能会想,把字体下下来装到电脑上不就可以了么,事实是这样,如果这个网站在我们自己的电脑上浏览可能不会出现什么问题,但是如果在没有这个字体的电脑上浏览可能就会有问题了,这里我们解决的是无论这个电脑上有没有这个字体可以正确的浏览这个网站。
第二、
先要打开这个地址:http://cufon.shoqolate.com/generate/ 打开之后先要下载一个JS文件,点击download下载。然后把本地的字体上传,下面的选项设为默认,最后 let’s do this. 这时会再次下载一个js文件。
第三、
把下载的JS文件引用到HTML中。
第四、
在html中加入这段代码:

<script type=”text/javascript”>
Cufon.replace(‘h5′, { fontFamily: ‘Myriad Pro’ });
</script>

在这里Cufon.replace(‘h5′, { fontFamily: ‘Myriad Pro’ });的意思就是:在h5这里的文字的字体是Myriad Pro字,不过在这里的h5并不是固定的它可是其它的标签,比如a span p等等,但是在用这些标签的时候,我们必需在css样式里面给它属上一个值,这个值就是:fontfamily:’Myriad Prpo’; 也就是把他的字体给写上去,这样才会有效。