• CSS教程 @font-face 网页中嵌入特殊字体方法


    一、获取特殊字体:

    我们拿下面这种single Malta字体来说吧:

    要得到single Malta字体,不外乎两种途径,其一找到付费网站购买字体,其二就是到免费网站DownLoad字体。当然要给钱的这种傻事我想大家都不会做的,那我们就得到免费的地方下载,在哪有呢?我平时都是到Google Web FontsDafont.com寻找自己需要的字体,给大家推荐的这两个都是国外的站点,打开速度会比较慢,国内的像站长字体font.chinaz.com,都很好用,当然网上也还有别的下载字体的地方,下载下来的文件里面有.TTF。然后开始下一步

    二、获取@font-face所需字体格式:

    特殊字体已经在你的电脑中了,现在我们需要想办法获得@font-face所需的.eot,.woff,.ttf,.svg字体格式。要获取这些字体格式,我们同样是需要第三方工具或者软件来实现,下面我给大家推荐一款我常用的一个工具fontsquirrelfont2web.com。也可以直接百度TTF换格式

    现在只要用Conv_SingleMalta类名就可以运用特殊字体了。

    @font-face {
        font-family: 'Conv_SingleMalta';
        src: url('fonts/SingleMalta.eot');
        src: local('☺'), url('fonts/SingleMalta.woff') format('woff'), url('fonts/SingleMalta.ttf') format('truetype'), url('fonts/SingleMalta.svg') format('svg');
        font-weight: normal;
        font-style: normal;
    }
    .Conv_SingleMalta{
      font-family: 'Conv_SingleMalta';
    }
    

      

    ps:解释一下这些格式

    一、TureTpe(.ttf)格式:

    .ttf字体是Windows和Mac的最常见的字体,是一种RAW格式,因此他不为网站优化,支持这种字体的浏览器有【IE9+,Firefox3.5+,Chrome4+,Safari3+,Opera10+,iOS Mobile Safari4.2+】;

    二、OpenType(.otf)格式:

    .otf字体被认为是一种原始的字体格式,其内置在TureType的基础上,所以也提供了更多的功能,支持这种字体的浏览器有【Firefox3.5+,Chrome4.0+,Safari3.1+,Opera10.0+,iOS Mobile Safari4.2+】;

    三、Web Open Font Format(.woff)格式:

    .woff字体是Web字体中最佳格式,他是一个开放的TrueType/OpenType的压缩版本,同时也支持元数据包的分离,支持这种字体的浏览器有【IE9+,Firefox3.5+,Chrome6+,Safari3.6+,Opera11.1+】;

    四、Embedded Open Type(.eot)格式:

    .eot字体是IE专用字体,可以从TrueType创建此格式字体,支持这种字体的浏览器有【IE4+】;

    五、SVG(.svg)格式:

    .svg字体是基于SVG字体渲染的一种格式,支持这种字体的浏览器有【Chrome4+,Safari3.1+,Opera10.0+,iOS Mobile Safari3.2+】。

    这就意味着在@font-face中我们至少需要.woff,.eot两种格式字体,甚至还需要.svg等字体达到更多种浏览版本的支持。

  • 相关阅读:
    python—Celery异步分布式
    python 安装虚拟环境步骤
    同源策略:
    git 的用法和命令
    一分钟搞定AlloyTouch图片轮播
    JavaScript学习总结(一)——延迟对象、跨域、模板引擎、弹出层、AJAX示例
    CSS3与页面布局学习总结(八)——浏览器兼容与前端性能优化
    移动前端UI选择
    你必须收藏的Github技巧
    HTML5 学习笔记(二)——HTML5新增属性与表单元素
  • 原文地址:https://www.cnblogs.com/zshno1/p/10685335.html
Copyright © 2020-2023  润新知