工作笔记——web字体格式转换
转载自:http://blog.csdn.net/xiaolongtotop/article/details/8316554
目前,文字信息仍是网站最主要的内容,随着CSS3技术的不断成熟,Web字体逐渐成为话题,这项让未来Web更加丰富多彩的技术拥有多种实现方案,其中之一是通过@font-face属性在网页中嵌入自定义字体,主流的浏览器都支持这项技术,本文介绍主要的几种Web字体格式及字体格式转换。
Web字体格式介绍
TrueType (.ttf)
EOT – Embedded Open Type (.eot)
OpenType 字体嵌入到网页并可以下载至浏览器渲染,浏览器根据 CSS 中 @font-face 的定义,下载,渲染这种 .EOT
后缀的字体文件。这些文件只在当前页活动的状态下,临时安装在用户的系统中。
OpenType (.otf)
font)电脑字体类型,采用PostScript格式,是美国微软公司与Adobe公司联合开发,用来替代TrueType字型的新字型。这类字体的文件扩展名为.otf,类型代码是OTTO,现行标准为OpenType
1.4。OpenType最初发表于1996年,并在2000年之后出现大量字体。它源于微软公司的TrueType
Open字型,TrueType Open字型又源于TrueType字型。OpenType font包括了Adobe CID-Keyed
font技术。Adobe公司已经在2002年末将其字体库全部改用OpenType格式。
WOFF – Web Open Font Format (.woff)
TrueType 和 OpenType ,WOFF(Web开发字体格式)是一种专门为了 Web
而设计的字体格式标准,它并不复杂,实际上只是对于 TrueType / OpenType
等字体格式的封装,并针对网络使用加以优化:每个字体文件中含有字体以及针对字体的元数据(Metadata),字体文件被压缩,以便于网络传输,并且不包含任何加密或者
DRM 措施。包括 Adobe、 Lino Type、Monotype 在内的几乎所有主要的字体供应商都加入到支持 WOFF 的行列中来。
SVG (Scalable Vector Graphics) Fonts (.svg)
Vector
Graphics)是基于可扩展标记语言(XML),用于描述二维矢量图形的一种图形格式。SVG由W3C制定,是一个开放标准。SVG严格遵从XML语法,并用文本格式的描述性语言来描述图像内容,因此是一种和图像分辨率无关的矢量图形格式。SVG可以使你设计的网页可以更加精彩细致,使用简单的文本命令,SVG可实现色彩线性变化、路径、自定义字体、透明效果、滤镜效果等各式常见的图形图像效果。
在线字体格式转换工具介绍
Online Font Converter
Free Font Conve
The FontSquirrel
Converter
font-face
generator
Font 2 Web
ttf 2 eot
otf 2 woff

工作笔记——web字体格式转换的更多相关文章
- web字体格式转换
@font-face { font-family: 'emotion'; src: url('emotion.eot'); /* IE9*/ src: url('emotion.eot?#iefix' ...
- web字体格式及几种在线格式转换工具介绍
原文地址:http://blog.csdn.net/xiaolongtotop/article/details/8316554 目前,文字信息仍是网站最主要的内容,随着CSS3技术的不断成熟,Web字 ...
- 几种web字体格式
目前,文字信息仍是网站最主要的内容,随着CSS3技术的不断成熟,Web字体逐渐成为话题,这项让未来Web更加丰富多彩的技术拥有多种实现方案,其中之一是通过@font-face属性在网页中嵌入自定义字体 ...
- Node.js 字体格式转换 ttf2eot ttf2woff ttf2svg
前几天为了查找字体转换工具网上搜索,既然用 Node.js 来做的工具. https://github.com/fontello/ttf2eot https://github.com/fontello ...
- 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 ...
- 《工作笔记:移动web页面前端开发总结》
工作笔记:移动web页面前端开发总结 移动web在当今的发展速度是一日千里,作为移动领域的门外汉,在这段时间的接触后,发现前端开发这一块做一个小小的总结. 1.四大浏览器内核 1.Trident (I ...
- 如何把你的图标转换成web字体
在这篇教程中,我们将使用一个免费的Web应用程序IcoMoon将矢量图转换成Web字体,然后将生成的字体通过css应用到Web页面中. 通常我们在网站中必不可少的会使用到一些小图标.在正常尺寸下,布局 ...
- Web字体库下载及转换工具
1.字体现在网站: http://ztxz.org/ 2.Web字体在线格式转换器: http://www.freefontconverter.com/ 3.
- 推荐一个web字体转换工具TTF转SVG
推荐一个web字体转换工具:https://www.fontsquirrel.com/tools/webfont-generator
随机推荐
- 【mysql】一次有意思的数据库查询分析。
本文是在做一家汽车配件的电商网站时,大体情景是一个List.php页面,该页面分页列出部分配件并统计总数量用于分页. 当然该页面中也可以指定一下查询条件,如适配的车辆品牌.车系.排量.年份等,一件商品 ...
- ASP.NET MVC - The view must derive from WebViewPage, or WebViewPage<TModel>
当通过一个空的站点构建ASP.NET MVC时经常会出现各种配置缺少的问题,最简单但的办法是吧VS自动生成的web.config文件拷贝到对应的目录下面 The view must derive fr ...
- android 清除缓存功能
本应用数据清除管理器 DataCleanManager.java 是从网上摘的 忘了 名字了 对不住了 载入一个webview 产生缓存 众所周知的webview是产生缓存的主要原因之中的一 ...
- 杂记之--如何把项目托管到GitHub上面
参考了文顶顶大神的方法,这里仅做记录用! https://pan.baidu.com/s/1gfCaCXd
- leetcode -- Balanced Binary Tree TODO
Given a binary tree, determine if it is height-balanced. For this problem, a height-balanced binary ...
- 阿里云CentOS6.8安装MySQL5.6
1.使用SSH Secure Shell工具连接阿里云服务器 2.使用SSH Secure File Transfer工具上传MySQL压缩包 3.解压MySQL压缩包到指定目录(需要在先/usr/l ...
- JavaScript作用域原理——作用域根据函数划分
一.一个for实例 <p id="scope3" style="color:red"></p> var pscope3 = docume ...
- 应用开发之WinForm开发
本章简言 上一章笔者介绍了关于WinForm环境.这一章笔者将继续讲WinForm.只不过更加的面向开发了.事实就是在学习工具箱里面的控件.对于WinForm开发来讲,企业对他的要求并没有那么高.但是 ...
- 说说M451例程之PWM的寄存器讲解
M451提供了两路PWM发生器.每路PWM支持6通道PWM输出或输入捕捉.有一个12位的预分频器把时钟源分频后输入给16位的计数器,另外还有一个16位的比较器.PWM计数器支持向上,向下,上下计数方式 ...
- 如何在 Linux 上录制你的终端操作
导读 录制一个终端操作可能是一个帮助他人学习 Linux .展示一系列正确命令行操作的和分享知识的通俗易懂方法.不管是出于什么目的,从终端复制粘贴文本需要重复很多次,而录制视频的过程也是相当麻烦,有时 ...