精华内容
下载资源
问答
  • 这是一个基本的Web应用程序,允许用户查看woff或woff2 Webfont的字形。 用户在其硬盘驱动器上选择一种Web字体,然后该应用程序显示该字体的所有选定glpyh。 我为这件事情对我来说很好而感到自豪,但是为了重新整理...
  • woff格式字体怎么打开和编辑?

    万次阅读 2014-01-07 09:56:00
    woff百度百科:http://baike.baidu.com/link?url=toS7yqpN9VlEcO2GOEp5JEA9-TeaZgIdVqTOv7iHshsNvk-V8HtxEY0ku08TzUoDaEfRhGy_atYdr88bCHpwkK   Web开放字体格式   woff是字体文件,做网页时放到服务端,如果客户端...

    如题!

     

    woff百度百科:http://baike.baidu.com/link?url=toS7yqpN9VlEcO2GOEp5JEA9-TeaZgIdVqTOv7iHshsNvk-V8HtxEY0ku08TzUoDaEfRhGy_atYdr88bCHpwkK

     

    Web开放字体格式

     

    woff是字体文件,做网页时放到服务端,如果客户端浏览器中可以加载这个。

     

    那么,woff格式的字体到底用什么软件来打开和编辑?

     

    web font字体网址 http://www.youziku.com/

     

    调用web font的3种方式:http://www.youziku.com/Home/Instruction

     

     

    字体格式:

    说到浏览器对@font-face的兼容问题,这里涉及到一个字体format的问题,因为不同的浏览器对字体格式支持是不一致的,这样大家有必要了解一下,各种版本的浏览器支持什么样的字体。

    一、TureTpe(.ttf)格式:

    .ttf字体是Windows和Mac的最常见的字体,是一种RAW格式,因此他不为网站优化,支持这种字体的浏览器有【IE9+,Firefox3.5+,Chrome4+,Safari3+,Opera10+,iOS Mobile Safari4.2+】;

    二、OpenType(.otf)格式:

    .otf字体被认为是一种原始的字体格式,其内置在TureType的基础上,所以也提供了更多的功能,支持这种字体的浏览器有【Firefox3.5+,Chrome4.0+,Safari3.1+,Opera10.0+,iOS Mobile Safari4.2+】;

    三、Web Open Font Format(.woff)格式:

    .woff字体是Web字体中最佳格式,他是一个开放的TrueType/OpenType的压缩版本,同时也支持元数据包的分离,支持这种字体的浏览器有【IE9+,Firefox3.5+,Chrome6+,Safari3.6+,Opera11.1+】;

    四、Embedded Open Type(.eot)格式:

    .eot字体是IE专用字体,可以从TrueType创建此格式字体,支持这种字体的浏览器有【IE4+】;

    五、SVG(.svg)格式:

    .svg字体是基于SVG字体渲染的一种格式,支持这种字体的浏览器有【Chrome4+,Safari3.1+,Opera10.0+,iOS Mobile Safari3.2+】
    这就意味着在@font-face中我们至少需要.ttf,.eot两种格式字体,甚至还需要.svg等字体达到更多种浏览版本的支持。

     

     IcoMoon——强悍的图标字体生成利器

    http://icomoon.io/app/#/select

     

     

    展开全文
  • woff百度百科:http://baike.baidu.com/link?url=toS7yqpN9VlEcO2GOEp5JEA9-TeaZgIdVqTOv7iHshsNvk-V8HtxEY0ku08TzUoDaEfRhGy_atYdr88bCHpwkK Web开放字体格式 woff是字体文件,做网页时放到服务端,如果客户端...

    如题!

     

    woff百度百科:http://baike.baidu.com/link?url=toS7yqpN9VlEcO2GOEp5JEA9-TeaZgIdVqTOv7iHshsNvk-V8HtxEY0ku08TzUoDaEfRhGy_atYdr88bCHpwkK

     

    Web开放字体格式

     

    woff是字体文件,做网页时放到服务端,如果客户端浏览器中可以加载这个。

     

    那么,woff格式的字体到底用什么软件来打开和编辑?

     

    web font字体网址 http://www.youziku.com/

     

    调用web font的3种方式:http://www.youziku.com/Home/Instruction

     

     

    字体格式:

    说到浏览器对@font-face的兼容问题,这里涉及到一个字体format的问题,因为不同的浏览器对字体格式支持是不一致的,这样大家有必要了解一下,各种版本的浏览器支持什么样的字体。

    一、TureTpe(.ttf)格式:

    .ttf字体是Windows和Mac的最常见的字体,是一种RAW格式,因此他不为网站优化,支持这种字体的浏览器有【IE9+,Firefox3.5+,Chrome4+,Safari3+,Opera10+,iOS Mobile Safari4.2+】;

    二、OpenType(.otf)格式:

    .otf字体被认为是一种原始的字体格式,其内置在TureType的基础上,所以也提供了更多的功能,支持这种字体的浏览器有【Firefox3.5+,Chrome4.0+,Safari3.1+,Opera10.0+,iOS Mobile Safari4.2+】;

    三、Web Open Font Format(.woff)格式:

    .woff字体是Web字体中最佳格式,他是一个开放的TrueType/OpenType的压缩版本,同时也支持元数据包的分离,支持这种字体的浏览器有【IE9+,Firefox3.5+,Chrome6+,Safari3.6+,Opera11.1+】;

    四、Embedded Open Type(.eot)格式:

    .eot字体是IE专用字体,可以从TrueType创建此格式字体,支持这种字体的浏览器有【IE4+】;

    五、SVG(.svg)格式:

    .svg字体是基于SVG字体渲染的一种格式,支持这种字体的浏览器有【Chrome4+,Safari3.1+,Opera10.0+,iOS Mobile Safari3.2+】
    这就意味着在@font-face中我们至少需要.ttf,.eot两种格式字体,甚至还需要.svg等字体达到更多种浏览版本的支持。

     

     IcoMoon——强悍的图标字体生成利器

    http://icomoon.io/app/#/select

     

     

     

    转载于:https://www.cnblogs.com/riasky/p/3508796.html

    展开全文
  • 打开CMD 输入cd C:\Program Files (x86)\IIS Express 回车 输入 转载于:https://www.cnblogs.com/CoffeeEddy/p/6340482.html

    打开CMD 

    输入cd C:\Program Files (x86)\IIS Express 回车

    输入

    转载于:https://www.cnblogs.com/CoffeeEddy/p/6340482.html

    展开全文
  • 《由iconfont引起的svg、ttf、woff、woff2图标的研究及转换》 1、背景 最近在研究IconFont实现图标的管理,玩着玩着,就有种做成项目管理的冲动,不过工作了3年多的我,仍然呆在原公司原地踏步(跳槽啥的你...

    《由iconfont引起的svg、ttf、woff、woff2图标的研究及转换》

    1、背景

    最近在研究IconFont实现图标的管理,玩着玩着,就有种做成项目管理的冲动,不过工作了3年多的我,仍然呆在原公司原地踏步(跳槽啥的你懂得),没有时间啊。没办法,只能先收集资料做笔记咯。

    IconFont是从css3支持 @font-face 开始的,来看看优缺点:

    –优点

    • 矢量图标:不会缩放失真;
    • 灵活可控:无论大小、颜色(可以添加如color、hover、filter、text-shadow、transform等各种文字效果)
    • 兼容性好:兼容低版本浏览器。
    • 加载文件体积小;
    • 减少请求:所有的图标只用一个请求。

    –缺点

    • 单色:只能被渲染成单色,或者是CSS3的渐变色
    • 成本高:制作门槛高,耗时长,维护成本也很高。

    但总体来说,优点大于缺点的(不然怎么会被大量使用呢 ^_^)。

    2、制作网站:

    我们先来看看哪些网站支持制作和导出下载:

    2.1 iconfont

    • 官网:https://www.iconfont.cn
    • 阿里妈妈MUX倾力打造的矢量图标管理、交流平台。
    • 设计师将图标上传到Iconfont平台,用户可以自定义下载多种格式的icon,平台也可将图标转换为字体,便于前端工程师自由调整与调用。
    • 这也是官网的自我介绍。

    2.2 icomoon

    • 官网:https://icomoon.io/
    • 貌似是一个国外网址,具体没玩过(个人英语水平不好),应该也没iconfont好用。

    本文/本人从iconfont开始玩起。
    制作教程很多,个人觉得MUI有篇文章不错(当然,适用平台不一样,只要看部分就好)

    3、文件结构与介绍

    制作下载后,结构如下:
    IconFont制作结构图
    看文档是按需要挑文件,但也是一脸懵逼,为啥有这么多文件呢?其它文件用来干啥的?(本人是“十万个为什么”,哈哈)

    3.1 demo_index.html 和 demo.css

    使用方式的demo,其优势和对比在页面里有具体描述。类似于说明文档。

    3.2 svg / svgz

    SVG(Scalable Vector Graphics),即矢量图,是用于描述二维矢量图形的一种图形格式。在 Web 中使用 SVG 可以解决位图放大失真的问题。

    其实,.svg文件就是一个xml文件:

    • svg文件就是一个xml,定义了文字属性,位置等信息。
    • svg教程
    • 例子:
    <?xml version="1.0" standalone="no"?>
    <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 
    		"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd" >
    <svg>
    	<circle glyph-name="warning" unicode="&#59343;" 
    		cx="100" cy="50" r="40" stroke="black" stroke-width="2" fill="red"/>
    </svg>
    

    3.3 ttf / otf

    TTF(TrueTypeFont)是Apple公司和Microsoft公司共同推出的字体文件格式,随着windows的流行,已经变成最常用的一种字体文件表示方式。部分的因为这种格式容易被非法复制,因此催生了后来的WOFF字体格式。

    3.4 eot

    EOT(Embedded Open Type),是微软创造的字体格式。这种格式只在IE6-IE8里使用。

    3.5 woff

    WOFF(Web Open Font Format)是一种网页所采用的字体格式标准。此字体格式发展于2009年,现在正由万维网联盟的Web字体工作小组标准化,以求成为推荐标准。此字体格式不但能够有效利用压缩来减少档案大小,并且不包含加密也不受DRM(数位著作权管理)限制。WOFF字体通常比其它字体加载要快,因为使用了OTF和TTF字体里的存储结构和压缩算法。这种字体格式还可以加入元信息和授权信息。

    3.6 woff2(*)

    WOFF2(Web Open Font Format 2.0),相比woff最大的优化应该是加强了字体的压缩比。

    3.7 js+css

    这个就不用说了吧~

    4、文件大小与兼容性

    4.1 文件大小:

    • woff2(*) < woff < ttf ≈ eot < svg
    • 从请求量上来看,woff\woff2格式的图标库最小

    4.2 浏览器兼容性:

    以下兼容性图片来自于网络

    @font-face:

    基本全兼容
    @font-face

    svg:

    ios、safari及低端安卓兼容
    svg

    eot:

    只有IE
    eot

    ttf:

    基本兼容,IE兼容情况不是很好
    ttf

    woff:

    IE9+,android4.4+,其他兼容良好
    woff

    woff2(*):

    除IE及低系统移动端,其他兼容情况较好
    woff2*

    从上图来看

    • font-face支持情况良好,完全可以使用字体形式来实现图标;
    • PC上兼容较好的是woff格式,ttf对IE的兼容情况不容乐观,svgfont只对Safari兼容,而eot只对IE兼容,如果要做到兼容IE8需要结合eot混着用;
    • 移动上eot完全不兼容,svgfont低端系统能很好兼容但不知道为何高端安卓不再支持,考虑到厂里较特殊的兼容要求(ios8.0,android4.0),最为合适的看来就是woff及ttf格式了。

    结合大小和兼容情况来看,可以优先使用woff格式(要兼容安卓4.0的话优先使用ttf),如果要兼容IE低版本的话需要使用eot格式,正如iconfont.css的处理:

    @font-face {font-family: "iconfont";
      src: url('iconfont.eot?t=1555049840333'); /* IE9 */
      src: url('iconfont.eot?t=1555049840333#iefix') format('embedded-opentype'), /* IE6-IE8 */
      url('data:application/x-font-woff2;charset=utf-8;') format('woff2'),
      url('iconfont.woff?t=1555049840333') format('woff'),
      url('iconfont.ttf?t=1555049840333') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+ */
      url('iconfont.svg?t=1555049840333#iconfont') format('svg'); /* iOS 4.1- */
    }
    

    5、转换

    iconfont文件互转有以下好的网站:

    5.1 批量合并系统

    本人想做的一个 对iconfont批量合并的系统

    • 背景:本人刚接手一个项目,里面有iconfont,结构都还完整,有一天需求想改两个图标(大量使用)。
    • 过程:然后,剩下我一个人在风中瑟瑟发抖。要实现,就需要新增两个图标,然后从网站上下载zip,再在项目里一个一个页面改class和引入新的css文件。
    • 想法:
      1.引入css(css引入所有用到的ttf等文件)
      2.ttf等文件可以通过svg转换,也就是说,如果要改一个图标,只要改svg,然后转换即可
      3.而如果要新增图标,只要在iconfont官网制作并下载zip,然后合并svg文件(在svg里加一个glyph),然后再在css里定义.icon-xxx:before { content:"\xxxx";}即可使用了(转换)。
      4.如何处理和合并svg文件呢?
    • 合并svg:
      1.用EditPlus或文本编辑器打开.svg文件发现,svg就是一个xml文件吖。
      2.那么流程就清楚啦,只要合并xml内容就行了。
    • 整理:
      1.用户指定原svg文件和原css文件,然后再从iconfot制作下载要合并的svg文件。
      2.提交后后台就有两个svg文件了,后台以原svg文件为主,读取新svg文件的glyph标签,并处理其glyph-name=“music” unicode="&#xf001;" 两个属性。(原文件产生两个map,用于解决重复)
      3.判断重复,有重复就提示,没重复就合并到原svg文件。
      4.仔细看前缀,在css文件追加 .x=前缀-x=glyph-name:before { content:“x=unicode”;}
      5.比如前缀是icon,name=music,unicode=&#xf001;,就追加 .icon-music:before { content:"&#xf001";}
      6.这样,用户就得到了新的svg和css文件啦
      7.用户手动将svg到转换网站转换,就能得到新的一个完整结构啦。
      8.不动原svg或css内容的原因是,可能原来图标就有被使用了,不能随意更改。
    • 最后:
      1.本系统主要是在合并环节。----如有可能,可以增加转换环节(有人说node.js可以)。
      2.做得好的话,还可以将图标显示出来,用户决定去留。

    6、附件

    6.1 坑?

    搜索了十几个网站和文章,看到有人说iconfont有坑,特留文如下:

    接下面我们再来说说Iconfont在使用过程中可能遇到的各种坑。

    • 字体图标在一些浏览器下会遇到被加粗的问题,设置-webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;解决。
    • 跨域访问不到字体,由于怕字体版权得不到保护,默认跨域的字体文件是访问不到的,一般通过服务器设置 Access-Control-Allow-Origin指定自己需要的网站和设置同域来解决这个问题。
    • 不要包含没有使用的@font-face,IE将部分他是否使用,统统加载下来。万恶的IE。
    • @font-face声明之前,如果有script标签的话,直到字体文件完成下载之前,IE将都不会渲染任何东西。

    有兴趣的同学可以去坑里面走一圈,自己试试坑的深浅。博主就介绍在这里,如果有错误还望大家指出,共同学习。

    6.2 x

    xx


    觉得可以,记得右上角点赞哦!如有不正确的地方,欢迎各位大神指教!

    【The End】

    展开全文
  • woff 404 woff2 404

    2018-05-15 11:35:03
    问题:google fonts 国内不...原因:因为服务器IIS不认SVG,WOFF/WOFF2 这几个文件类型,只要在IIS上添加MIME 类型即可。解决方法1、打开服务器IIS管理器,找到MIME类型。2、添加MIME类型 添加三条: 文件扩展名 ...
  • 找不到woff、woff2字体或图标的错误 原因:因为服务器IIS不认SVG,WOFF/WOFF2 这几个文件类型,只要在IIS上添加MIME 类型即可。​ IIS7 解决办法: http://www.cnblogs.com/hanwen/p/4212622.html​ IIS6解决办法:...
  • 问题:最近在IIS上部署web项目的时候,发现浏览器总是报找不到woff、woff2字体的错误。导致浏览器加载字体报404错误,白白消耗了100-200毫秒的加载时间。原因:因为服务器IIS不认SVG,WOFF/WOFF2 这几个文件类型,...
  • 需要在pom文件的build中加入以下代码: ${project.basedir}/src/main/resources true static/** ${...8 ${project.basedir}/libs true org.apache.maven.plugins maven-resources-plugin woff woff2 eot ttf svg
  • 前言:这一期,是针对起点中文网的作品详情页爬取,这是对woff反爬的入门,相对美团之类的字体反爬容易一些。短短的几十行代码,逻辑清晰!让你欲罢不能的关注我!有人就要说了,我已经会爬取...2woff文件一般都在cs
  • base转.ttf,woff2转换成.ttf的步骤,如何自定义网站字体,如何将其他网站的字体用于本地系统,本文介绍woff2转换.ttf的方式步骤,让网站更加个性化。
  • 部署项目后,发现没有发现浏览器总是报找不到woff、woff2字体的错误。​ 原因:因为服务器IIS不认SVG,WOFF/WOFF2 这几个文件类型,只要在IIS上添加MIME 类型即可。 登录网址下载对应的文件放在自己的项目...
  • 解决Web部署 svg/woff/woff2字体 404错误(转) 原文链接:http://www.cnblogs.com/hanwen/p/4212622.html 问题:最近在IIS上部署web项目的时候,发现浏览器总是报找不到woff、woff2字体的...
  • 解决Web部署 svg/woff/woff2字体 404错误

    千次阅读 2016-01-18 11:09:22
    部署项目后,发现没有<,+等符号,字体也不对,发现浏览器总是报找不到woff、woff2字体的错误。​原因:因为服务器IIS不认SVG,WOFF/WOFF2 这几个文件类型,只要在IIS上添加MIME 类型即可。​IIS7 解决办法: ...
  • 解决办法fonts/fontawesome-webfo这里写自定义目录标题 1.打开服务器IIS管理器,找到MIME类型; 2、添加MIME类型 添加三条:  文件扩展名 MIME类型  .svg image/svg+xml ....woff2 application/x-font-woff ...
  • 一、问题 在IIS上部署网站,网页引用...IIS默认设置情况下不识别.woff、.woff2、.svg这几个后缀的文件。 三、解决方法 在IIS上添加(.woff、.woff2、.svg)MIME类型。 三、操作 1、打开IIS,找到“MIME 类型”。 2、按
  • woff文件 Web开放字体格式(Web Open Font Format,简称WOFF)是一种网页所采用的字体格式标准。此字体格式发展于2009年,现在正由万维网联盟的Web字体工作小组标准化,以求成为推荐标准。此字体格式不但能够有效...
  • 上图的这个报错,我原先使用的是官方默认给的引入方式,后来将iconfont.woff2装成了base64的格式,打开依然是报这个错误。 解决方法 直接去iconfont官网去生成对应的在线地址。就可以解决以上问题了。 ...
  • 因为服务器IIS不认SVG,WOFF/WOFF2 这几个文件类型,只要在IIS上添加MIME 类型即可。 解决方法 1、打开服务器IIS管理器,找到MIME类型。 2、添加MIME类型 添加三条:    文件扩展名 ...
  • 先来看看问题 ...引起类似以上问题的原因是由于Web服务器没有识别.svg/.woff/.woff2这些文件类型。 解决方案: 如果是部署在iis服务器上的,打开IIS管理器 >> MIME >> 直接添加下面对应的...
  • 部署项目后,发现没有发现浏览器总是报找不到woff、woff2字体或图标的错误。​ 原因:因为服务器IIS不认SVG,WOFF/WOFF2 这几个文件类型,只要在IIS上添加MIME 类型即可。​ IIS7 解决办法: ...
  • 1.打开服务器IIS管理器,找到MIME类型 2.添加类型 文件扩展名MIME类型  ....svg image/svg+xml.woff application/x-font-woff.woff2 application/x-font-woff 转载于:https://www.cnblogs.c...
  • 爬虫woff字体反爬破解

    2020-10-28 18:17:33
    好久没写爬虫了,最近发现很多网站都出现了woff字体反爬。百度找了一下,发现都要钱,只好默默说一声fuck 那么,只好自己破解了。好的,那么开始。 如果你在抓去某个网站时候,抓下来的文字读不通,打开network你...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 5,757
精华内容 2,302
关键字:

woff2怎么打开