A Roadmap
  • Introduction
  • Roadmap
  • Basics
    • Basic Terminal Usage
      • Shell
        • 基本
        • 变量
        • 传递参数
        • 运算符
        • 命令
        • 流程控制
        • 函数
        • 输入输出重定向
    • Character Encoding
      • 字符编码
    • Data Structures & algorithms
    • Network
      • TCP/IP
      • Http/Https
        • 浏览器缓存
        • Status Code
        • GET & POST
        • HTTPS 握手过程
        • HostOnly Cookie
      • CDN
        • CDN 工作原理
    • Version Control
      • git message format
      • git commands
    • Principles
    • Design Patterns
    • Others
      • JSON
      • 正则表达式
  • Front End
    • Web Standard
      • Html
      • CSS
        • font-face 小记
        • Grid 布局简易笔记
      • Javascript
        • Ajax
          • Fetch
          • XMLHttpRequest
        • DOM
          • Selection
          • 常用 DOM 操作
          • script 标签的几个属性
        • Ecmascript
          • this 关键字
          • Event Loop
          • 隐式转换
          • Date
        • Event
          • 模拟事件
          • Others
    • Development
      • Package Management
        • npm
      • Modulization
        • 模块化机制
        • webpack 打包解析
      • Architecture
      • Build Tools
        • 如何编写一个自定义的 eslint 规则？
      • Debug
        • 移动端调试 web
      • Pre/Post Processors
      • Test
        • Jest Snapshot 使用指南
      • Type Checkers
        • TS 中 enum 的编译结果
    • Libs & frameworks
    • Platforms
      • Browser
        • Basics
          • 从输入 URL 到页面加载完成都发生了什么事情？
          • HTML 加载的过程示意图
          • 为什么读取某些属性，也会导致回流？
          • Chrome 进程模型
        • PWA
        • Compatible
        • Cross Origin
        • Performance
          • 性能检测：performance 对象
          • 性能指标
        • Others
          • 移动端 web 开发笔记
      • Server
      • Desktop Applications
      • Mobile Applications
        • Flutter 在移动端和 Web 端的技术实现
  • Back End
    • outline
    • Languages
      • Node
        • Event Loop
        • NodeJS 中的进程与线程
        • NodeJS 中的 esModule 与 commonJS
  • Clients
    • outline
    • 安装 IPA 包
  • DevOps
    • Languages
    • OS Concepts
    • Servers & terminal
  • UI & UX
    • outline
  • Others
    • Posts
      • 使用 node 爬取数据并导出到 excel
      • antd 1.x datepicker 时区问题
      • babel-transform-runtime 踩坑记录
      • lodash 按需加载注意事项
      • 记一次项目迁移的踩坑记录
      • 时区与JS中的Date对象
      • 记一次 vue + ts 开发踩坑
    • Tools
      • 个人常用的工具分享
      • tmux 简要笔记
Powered by GitBook
On this page
  • 简单对比
  • 兼容性
  • TTF/OTF
  • EOT
  • WOFF

Was this helpful?

  1. Front End
  2. Web Standard
  3. CSS

font-face 小记

PreviousCSSNextGrid 布局简易笔记

Last updated 3 years ago

Was this helpful?

简单对比

Type
Ext
Desc

True Type Font

ttf

苹果和微软共同开发。体积较大。应用范围广

Open Type Font

otf

Adobe和微软共同开发。由ISO组织制定了Open Font Format (off) 标准

Embedded OpenType

eot

对otf的压缩，但是比ttf文件更大。设计初衷是为了适应移动端

Web Open Font Format

woff

Mozilla基金会，Opera Software以及微软主导。体积小，12年开始成为w3c推荐标准。

兼容性

多数浏览器都支持。早期的安卓（2.1）和ios（3.2/4.1）不支持。

IE支持度不佳。

目前只有IE支持，可以兼容到IE6，edge都不支持。

对于eot的话，没有特殊要求就可以放弃治疗了。

与TTF/OTF相比，桌面端的兼容性差不多。

低版本安卓和ios兼容情况较差。

EOT
WOFF
TTF/OTF