网页使用特殊字体

为了设计需要,页面加不常见字体。

----------------------------------------------

情景 一、

网站上使用了特殊字体

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';} 
/*----------------字体 结束-----------------*/

 

页面里对应元素就可以看到效果啦

posted @ 2017-05-05 14:29  幸运的程序员  阅读(819)  评论(0编辑  收藏  举报