zoukankan      html  css  js  c++  java
  • 自定义字体的方法

    网页自定义字体终极教程(兼容各大浏览器)
    作者:零度逍遥 | 时间:2014-08-25 | 浏览:1050 | 0 条评论
    在我们浏览网页的时候,文字占据着网页的大部分空间,给我们提供重要的信息,所以作为前端开发工程师,我们有义务把网页的字体设计的更加美观,让用户看起来更加舒适,随着CSS3的出现,网页自定义字体收到越来越多的开发人员欢迎。

    我想有人可能会像我一样,尝试搜索过各种方法,但都不是太理想,有的是加载不成功,有的则是兼容性不好,无奈,自己闷头研究,终于在今天有了个成果,给大家分享一下。

    一、字体格式的了解
    首先,我们要的字体格式有个了解,常用的字体格式有以下几种:TTF、WOFF、EOT、SVG。这些字体格式的说明,我就不细说了,想知道的可以百度一下,下面我关键说一下各大浏览器对这些字体格式的兼容性。

    这张图片很明白的展示了各大浏览器对字体的支持情况,其中TrueType就是TTF格式,这个字体格式标准的浏览器都会支持,只有脑残的IE不认识,它只兼容EOT格式的字体,所以我们引入字体文件的时候最少要引入两种格式——TTF和EOT。

    二、自定义字体方法:
    主要是利用CSS3的font-face,代码如下:

    @font-face {
    font-family: "myFont"; //这里可以随意自定义字体名字
    src: url('font.ttf'); //引入字体文件
    }
    body {
    font-family: "myFont"; //与font-face定义的字体名字保持一致
    }
    这段代码只针对标准浏览器有效,要做到兼容的话,终极解决方案是以下代码:

    @font-face {
    font-family: 'MyFont';
    src: url('font.eot'); //针对IE9
    src: url('font.eot?#iefix'), //兼容IE6-IE8
    url('font.ttf'), //标准浏览器
    url('font.woff'), //标准浏览器
    url('font.svg#MyFont'); //不太常用
    }
    没有这么多格式的字体?简单,推荐一个字体格式转换网站:http://onlinefontconverter.com/ 很轻松完成各种字体格式转换

    http://videojs.com/


    http://www.bootcss.com/p/layoutit/

  • 相关阅读:
    layui iframe版点击左侧菜单栏实现加载等待动画
    概率论基础内容
    fatal error LNK1123:转换COFF期间失败:文件无效或损坏
    ERROR 2003:Can't connect to MySQL server on ‘localhost’...
    HttpWebRequest 无法连接到远程服务器
    Android Error: java.lang.IllegalStateException: Could not execute method of the activity
    创建.aspx页面
    CodeFile Inherits
    Unable to execute dex:Target out of range
    fatal error C1083: 无法打开包括文件“jni.h”
  • 原文地址:https://www.cnblogs.com/xuyanjiayou/p/8522727.html
Copyright © 2011-2022 走看看