@font-face语句是css中的一个功能模块，用于实现网页字体多样性的模块(设计者可随意指定字体，不需要考虑浏览者电脑上是否安装)。

@font-face文件

而由于网页中使用的字体类型，也是各浏览器对字体类型有不同的支持规格。 字体格式类型主要有几个大分类：TrueType、Embedded Open Type 、OpenType、WOFF 、SVG。

  • TrueType

    Windows和Mac系统最常用的字体格式，其最大的特点就是它是由一种数学模式来进行定义的基于轮廓技术的字体，这使得它们比基于矢量的字体更容易处理，保证了屏幕与打印输出的一致性。同时，这类字体和矢量字体一样可以随意缩放、旋转而不必担心会出现锯齿。

  • EOT– Embedded Open Type (.eot)

    EOT是嵌入式字体，是微软开发的技术。允许OpenType字体用@font-face嵌入到网页并下载至浏览器渲染，存储在临时安装文件夹下。

  • OpenType(.otf)

    OpenType是微软和Adobe共同开发的字体，微软的IE浏览器全部采用这种字体。致力于替代TrueType字体。

  • WOFF–WebOpen Font Format (.woff)

    WOFF（Web开发字体格式）是一种专门为了Web而设计的字体格式标准，实际上是对于TrueType/OpenType等字体格式的封装，每个字体文件中含有字体以及针对字体的元数据（Metadata），字体文件被压缩，以便于网络传输。

  • SVG(Scalable Vector Graphics) Fonts (.svg)

    SVG是由W3C制定的开放标准的图形格式。SVG字体就是使用SVG技术来呈现字体，还有一种gzip压缩格式的SVG字体。

字体格式类型(.eot/.otf/.woff/.svg)的更多相关文章

  1. ttf,eot,woff,svg,字体格式介绍及使用方法

    而由于网页中使用的字体类型,也是各浏览器对字体类型有不同的支持规格. 字体格式类型主要有几个大分类:TrueType.Embedded Open Type .OpenType.WOFF .SVG. T ...

  2. RF1001: 各浏览器对 '@font-face' 规则支持的字体格式不同，IE 支持 EOT 字体，Firefox Safari Opera 支持 TrueType 等字体

    http://w3help.org/zh-cn/causes/RF1001 http://blog.csdn.net/agileclipse/article/details/12450949 http ...

  3. 几种web字体格式

    目前,文字信息仍是网站最主要的内容,随着CSS3技术的不断成熟,Web字体逐渐成为话题,这项让未来Web更加丰富多彩的技术拥有多种实现方案,其中之一是通过@font-face属性在网页中嵌入自定义字体 ...

  4. web字体格式及几种在线格式转换工具介绍

    原文地址:http://blog.csdn.net/xiaolongtotop/article/details/8316554 目前,文字信息仍是网站最主要的内容,随着CSS3技术的不断成熟,Web字 ...

  5. 工作笔记——web字体格式转换

    转载自:http://blog.csdn.net/xiaolongtotop/article/details/8316554 目前,文字信息仍是网站最主要的内容,随着CSS3技术的不断成熟,Web字体 ...

  6. 黄聪：如何为IIS增加svg和woff等字体格式的MIME

    现在字体图标已经渐渐代替了图片了,移动端用起来也很方便. 使用了字体文件来显示矢量的图标,为了能在IIS上正常显示图标,可以通过增加iis的MIME-TYPE来支持图标字体文件 下面就把IIS增加sv ...

  7. IIS无法加载字体文件(*.woff,*.svg)的解决办法

    在编写前端代码的过程中经常会遇到使用特定的字体(*.woff,*.svg),此时在加载字体时请求会被返回 Failed to load resource: the server responded w ...

  8. 认识 Iconfont 以及什么是 .eot、.woff、.ttf、.svg

    一.Iconfont 1. 概述 在前端作业中,二十年前只有页面中铺满文字就算上线产品,现如今,不加点俏皮的“图标”会让页面显得很 Low 很 Low.   图标 在写这篇文章之前,我一直以为上图中的 ...

  9. CSS3 新特性 开放字体格式WOFF

    疑问 上面这是虾米玩意?    \e806 是在自定义字体表中的字体位置.    好嘛 现在问题来了 WOFF里面是什么东西呢? 怎么才能看到? 用这个:FontCreatorPortable     ...

随机推荐

  1. phpredis -- Redis Arrays用法

    Redis Arrays 来自地址:https://github.com/phpredis/phpredis/blob/master/arrays.markdown#readme 扩展原文件array ...

  2. PDF文档小技巧整理一览

    1.福昕阅读器文档背景修改为保护眼睛的颜色? 1)文件 -> 偏好设置 -> 访问 -> 勾选 "改变文档颜色" 2)选择 '自定义颜色'->'页面背景颜色 ...

  3. 利用VisualStudio单元测试框架举一个简单的单元测试例子

    本随笔很简单,不涉及mock和stub对象,而是只给出一个简单的利用Visual Studio单元测试框架的最简单例子.如果需要深入理解Unit Test的原理与艺术,请参考<The art o ...

  4. Swarm配置文件管理

    一.前言 Docker 17.06引入了swarm服务配置,允许您在服务映像外部或运行容器中存储非敏感信息,例如配置文件. 这允许您保持镜像尽可能通用,而无需将配置文件绑定到容器或使用环境变量.在Sw ...

  5. Python【time】模块

    import timeprint(type(11.234))print("输出结果为时间戳,float类型:",time.time())print("输出结果为本地时间元 ...

  6. CF916E Jamie and Tree

    CF916E Jamie and Tree 题意翻译 有一棵n个节点的有根树,标号为1-n,你需要维护以下三种操作 1.给定一个点v,将整颗树的根变为v 2.给定两个点u, v,将lca(u, v)所 ...

  7. 关于Python运行代码报错：SyntaxError: Non-ASCII character '\xe5' in file的解决方法

    运行python文件报错如上 解决办法: # -*- coding: UTF- -*- 或者 #coding=utf- (注:此语句一定要添加在源代码的第一行) 原因:Python默认是以ASCII作 ...

  8. Spring @Transactional注解不回滚不起作用无效

    原文地址:http://www.cnblogs.com/wuxiaofeng/p/6819209.html   这几天在项目里面发现我使用@Transactional之后,抛了异常居然不回滚.后来终于 ...

  9. iview组件 eslint校验出错 Parsing error: x-invalid-end-tag

    如下: 解决: 在.eslintrc.js文件中加上: rules: { // allow async-await 'generator-star-spacing': 'off', // allow ...

  10. JavaScript语法对{}的奇葩处理

    JavaScript的语法有多坑,算是众人皆知了. 今天看到vczh的这条微博:http://weibo.com/1916825084/B7qUFpOKb , 代码如下: {} + []; [] + ...