一、需求分析

    
之前在写网页的过程中,遇到很多字的问题。比如ui设计师给了很好看的设计稿,但是因为担心浏览网页的人本地没有这些字体,于是每次都使用单调的微软雅黑或者宋体来代替。因为字体不一样,结果出来的效果和设计稿差很多。

    但是现在这个问题已经解决,css3出了一个外部字体库的功能,之前为了写这个功能,绕了很多弯路,直至心灰意冷。后来终于找到了一个解决问题的方法。




二、解决方法

    第一步:保证自己本地有需要的字体。

        1、确保自己的本地有你需要的字体。

        2、在自己的项目目录下面建立一个fonts文件夹,把自己需要用到的字体放在这个目录下面。

        ps:
获取字体的方式有很多种,可以自己到网上去下载自己喜欢的字体,但是很多字体下载的时候都是需要付费的,知识付费的时代,也很正常,或者可以找ui小姐姐要 。

        3、字体文件也要很多格式,比如 '.ttf'  、'.woff'  、'.eot' 
、'.svg'等等各种格式,并且大家很清楚的是,各大浏览器厂商很难做到都兼容各种字体,所以要准备各种格式的字体和代码,以适应各种各样的浏览器。


    第二步、把字体格式转成多种字体格式。


        点击这里 <https://www.fontsquirrel.com/tools/webfont-generator>
即可把你本地的一种字体格式转换成多种字体格式。这个字体格式转换的网站是英文的,但是可以用谷歌的翻译功能。(转换字体
这点很重要,我之前就是因为没有转换,结果字体效果根本出不来。)


    第三步、在这里贴上css代码和html代码


        1、css代码如下:

@font-face { font-family: 'YourWebFontName'; /* 这个名字可以自己定义 */ src:
url('../fonts/delicious-webfont.eot'); /* IE9 Compat Modes */
/*这里以及下面的src后面的地址填的都是自己本地的相对地址*/ src:
url('../fonts/delicious-webfont.eot?#iefix') format('embedded-opentype'), /*
IE6-IE8 */ url('../fonts/delicious-webfont.woff') format('woff'), /* Modern
Browsers */ url('../fonts/delicious-webfont.ttf') format('truetype'), /*
Safari, Android, iOS */ url('../fonts/delicious-webfont.svg#YourWebFontName')
format('svg'); /* Legacy iOS */ font-weight: bold; font-style: normal; } div{
font-size: 20px; font-family : 'YourWebFontName';/* 这里的名字一定要和上面自己定义的名字一样 */
margin-bottom: 20px; }
        2、html代码如下
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">
<title>Document</title> <link rel="stylesheet" href="./css/5.css"> </head>
<body> <div>singlemalta</div> <div>What are you doing?</div> <div>I'm study the
fonts in web.</div> </body> </html>

 代码都很简单,没有什么难的地方,主要就是文字的路径填的是你自己的本地路径,还有用的时候写的名字要和自己定义的名字相同,关于这两点,代码里面有详细解释,不要照搬过去。







如果这里有什么不对的地方,欢迎大家联系我哦~




    

友情链接
ioDraw流程图
API参考文档
OK工具箱
云服务器优惠
阿里云优惠券
腾讯云优惠券
华为云优惠券
站点信息
问题反馈
邮箱:ixiaoyang8@qq.com
QQ群:637538335
关注微信