• 中文字体引用及压缩


    中文字体引用(如思源雅黑)

    第一步: 网站下载字体: http://www.downcc.com/font/326030.html

    第二步:百度  @font-face生成器   (字客网 https://www.fontke.com/tool/fontface/   生成不同格式和字体和样式,页面引用即可)

    解决chrome浏览器下@font-face字体图标出现锯齿:

    要注意不同格式字体引用顺序问题 》 eot>svg>ttf>woff2>woff

    @font-face {
      font-family: "SourceHanSansCN-Regular";
      src: url("font/SourceHanSansCN-Regular.eot") format("embedded-opentype"),
          url("font/SourceHanSansCN-Regular.svg") format("svg"),
           url("font/SourceHanSansCN-Regular.ttf") format("truetype"),
            url("font/SourceHanSansCN-Regular.woff2") format("woff2"),
           url("font/SourceHanSansCN-Regular.woff") format("woff") ;
      font-weight: normal;
      font-style: normal;
    }

    *{font-family:'SourceHanSansCN-Regular',Arial, Helvetica, sans-serif;  -webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;-webkit-text-size-adjust:none; }

     https://www.cnblogs.com/Jm-jing/articles/6978830.html

    字蛛是一个中文字体压缩器

    http://font-spider.org/#use

    安装node.js 再打开Node.js command prompt 测试 node -v 有版本号出来即成功;
    然后再运行: npm install font-spider -g


    node.js出错原因:

    1. 要用Node.js command prompt 运行
    2. 字体引用时必须用英文单引号
    {
    @font-face {
    font-family:'SourceHanSansCN-Medium';
    src:url('../font/SourceHanSansCN-Medium.eot');
    src: url('../font/SourceHanSansCN-Medium.eot?#font-spider') format('embedded-opentype'),
    url('../font/SourceHanSansCN-Medium.svg') format('svg'),
    url('../font/SourceHanSansCN-Medium.ttf') format('truetype'),
    url('../font/SourceHanSansCN-Medium.woff2') format('woff2'),
    url('font/SourceHanSansCN-Medium.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    }
    }

    3. 不用引用图标字体;

    4. 再运行 font-spider G:/work/氚云/web/*.html



  • 相关阅读:
    ubuntu16.04本地软件源搭建
    2080TI显卡ubuntu16.04机器学习安装和克隆
    PLSQL导入excel数据方法
    只有英伟达显卡输出口的电脑安装ubuntu系统记录
    百度人脸识别学习
    http application/x-www-form-urlencoded 模式响应学习
    JS中继承的几种实现方式
    浅拷贝和深拷贝
    防抖和节流
    HTML知识点总结
  • 原文地址:https://www.cnblogs.com/aimyfly/p/9061064.html
Copyright © 2020-2023  润新知