网页使用特殊字体
为了设计需要,页面加不常见字体。
----------------------------------------------
情景 一、
网站上使用了特殊字体
1、注册一个有字库帐号,登录后上传自己的字体,或者使用开源字体,点击使用,你会看到怎么用
感谢有字库的免费服务, 赠送了10万库币,用完就得充值啦
2、在需要使用字体的页面添加JS
第一步:JS调用 (本JS支持https,只需要将src属性中的http改为https即可)
将以下代码添加到您网页的:<head>标签之中
<script type="text/javascript" src="http://cdn.webfont.youziku.com/wwwroot/js/wf/youziku.api.min.js"></script>
第二步:设置标签
将以下代码添加到您网页的:</body>标签之前,紧挨着</body>
<script type="text/javascript"> $youziku.load("body", "1c61872e424a48d0ba9d16f97dbbc240", "jdzhonyuanjian"); /*$youziku.load("#id1,.class1,h1", "1c61872e424a48d0ba9d16f97dbbc240", "jdzhonyuanjian");*/ /*...*/ $youziku.draw(); </script>
情景 二、
本地静态HTML页面使用特殊字体,不用考虑加载速度,字体直接拷进去用
1、字体客http://www.fontke.com/上传ttf文件,生成字体各种文件,拷贝到网页目录里
2、CSS里这样写
/*----------------字体 开始-----------------*/ @font-face{ font-family:'FZLTZHUNHK'; src:url('font/FZLTZHUNHK.eot'); /* IE9 Compat Modes */ src:url('font/FZLTZHUNHK.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('font/FZLTZHUNHK.woff') format('woff'), /* Modern Browsers */ url('font/FZLTZHUNHK.ttf') format('truetype'), /* Safari, Android, iOS */ url('font/FZLTZHUNHK.svg#FZLTZHUNHK') format('svg'); /* Legacy iOS */ font-weight:normal; font-style:normal;* } .thumbnail_text,h2,h3,h4,a,p{ font-family:'FZLTZHUNHK';} /*----------------字体 结束-----------------*/
页面里对应元素就可以看到效果啦