zoukankan      html  css  js  c++  java
  • 网页使用特殊字体

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

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

    情景 一、

    网站上使用了特殊字体

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

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

  • 相关阅读:
    webstorm 取消拖动代码
    可读流
    页面上怎么使用svg
    从element-ui按需引入去探索
    vue组件库用markdown生成文档
    create-react-app中的babel配置探索
    svg 使用中的疑惑点
    express中是如何处理IP的?
    koa中是如何封装获取客户端IP的?
    博客园文章添加目录
  • 原文地址:https://www.cnblogs.com/LLLLoveLLLLife/p/6812857.html
Copyright © 2011-2022 走看看