• web font各浏览器兼容问题以及格式


    语法:

    @font-face { font-family: <identifier>; src: <fontsrc> [, <fontsrc>]*; <font>; }

    设置嵌入HTML文档的字体。

    需要兼容当前的主流浏览器,需同时使用TureTpe(.ttf)、Web Open Font Format(.woff)、Embedded Open Type(.eot)、SVG(.svg)四种字体格式。

    嵌入HTML文档的字体是指将OpenType字体(压缩的TrueType字体)文件映射到客户端系统,用来提供HTML文档使用该字体,或取代客户端系统已有的同名字体。即让客户端显示客户端所没有安装的字体。

    .eot(Embedded Open Type)为IE的私有字体格式。Safari3.1开始支持.ttf(TrueType)和.otf(OpenType)。

    未来.woff(Web Open Font Format)将会取代.ttf(TrueType)和.otf(OpenType)两种字体格式。

    格式:

    			@font-face {
    				font-family: myfont;
    				src: url('webfont/iconfont.eot');   /*IE9+:EOT*/
    				src: url('webfont/iconfont.eot?#iefix') format('embedded-opentype'),   /* IE6-IE8 */
    				url('webfont/iconfont.woff') format('woff'),   /* chrome、firefox */
    				url('webfont/iconfont.ttf') format('truetype'),  /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/
    				url('webfont/iconfont.svg#svgFontName') format('svg');  /* iOS 4.1- */
    				font-weight: normal;
    				font-style: normal;
    			}
    

     

    在线字体转换器:

    https://www.fontke.com/tool/convfont/ 

  • 相关阅读:
    编写登陆认证程序
    模拟实现一个ATM + 购物商城程序
    三级菜单
    12 场景制造
    11 Unity Editor界面
    3.7练习题
    Coolite 弹窗妙用
    Nginx反向代理 实现Web负载均衡
    MySQL 架构
    Lnmmp
  • 原文地址:https://www.cnblogs.com/EdinburghOne/p/9525967.html
Copyright © 2020-2023  润新知