网页使用特殊字体

最新推荐文章于 2024-08-19 15:50:15 发布

a757956132

最新推荐文章于 2024-08-19 15:50:15 发布

阅读量145

点赞数

文章标签： javascript 移动开发 ViewUI

原文链接：http://www.cnblogs.com/LLLLoveLLLLife/p/6812857.html

版权

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

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

情景一、

网站上使用了特殊字体

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

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

转载于:https://www.cnblogs.com/LLLLoveLLLLife/p/6812857.html

a757956132

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
网页使用特殊字体

为了设计需要，页面加不常见字体。----------------------------------------------情景一、网站上使用了特殊字体1、注册一个有字库帐号，登录后上传自己的字体，或者使用开源字体，点击使用，你会看到怎么用感谢有字库的免费服务，赠送了10万库币，用完就得充值啦2、在需要使用字体的页面添加JS第一步：JS调用 (本JS支...
复制链接

扫一扫