解决Web部署 svg/woff/woff2字体 404错误

最新推荐文章于 2024-05-22 09:47:51 发布
最新推荐文章于 2024-05-22 09:47:51 发布
阅读量1.8k 收藏 2
点赞数
分类专栏： IIS 文章标签： 字体图标

最近项目中用到了fontawesome-webfont.svg等字体。部署项目后，发现没有<,+等符号，字体也不对，发现浏览器总是报找不到woff、woff2字体的错误。​

原因：因为服务器IIS不认SVG，WOFF/WOFF2 这几个文件类型，只要在IIS上添加MIME 类型即可。​

IIS7 解决办法： http://www.cnblogs.com/hanwen/p/4212622.html​

IIS6解决办法：http://blog.brain1981.com/682.html

详细如下:

​1、打开服务器IIS管理器，找到MIME类型。


2、添加MIME类型 添加三条：　　

       文件扩展名      MIME类型　

.svg             image/svg+xmz

​.woff            application/x-font-woff

​.woff2          application/x-font-woff

注：本文在win8环境下IIS7版本中填写的MIME类型

IIS 6:

打开IIS，找到网站，右键属性，打开“HTTP头”，找到右下角的“MIME类型…”


新建如下3条：

.svg image/svg+xml

.woff application/x-font-woff

.woff2 application/x-font-woff







bianjing40
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
php图标字体库,制作图标字体字库
weixin_39636540的博客
03-29 338
工具准备：1.ps 或者 Illustrator 等2.FontCreator 字体编辑器操作步骤1.在图片软件中调整好单独的图标；2.打开FontCreator 新建个字体，定义名称，然后删成需要的样子(也可以不删 )。3.打开一个空白字符图形，点击“导入图像”，导入我们制作一个图标。4.右击字符图形，选“属性”，调下值 然后插入(这个值用在写页面的时候)，做完保存。5.打开http://www...
浏览器显示Failed to decode downloaded font问题解决方案
weixin_44173639的博客
12-16 1万+
最近做一个spring boot项目时，网站有的图标显示的是小方格的形式 例如这样： 然后百度了半天，以下有四种解决方法： 第一：如果是在谷歌或者火狐浏览器出现的话，换成ie浏览器就可以显示了。（我的就是这种！！！） 如果你是那种刨根问底的性格，非要使用谷歌或者火狐，可以在服务器设置一下自己定义MIME类型。（具体自行百度）。 第二：检查是否使用maven，如果是，由于maven的filter（拦截），会破坏font文件的二进制文件格式，导致前台解析出错， 所以可以添加以下代码，到pom文件的标签下的标签
解决phpWeb部署 svg/woff/woff2字体 Failed to decode downloaded font
Irelia的博客
12-02 9491
最近项目中用到了fontawesome-webfont.svg等字体。部署项目后，发现没有发现浏览器总是报找不到woff、woff2字体或图标的错误。​ 原因：因为服务器IIS不认SVG，WOFF/WOFF2 这几个文件类型，只要在IIS上添加MIME 类型即可。​ IIS7 解决办法： http://www.cnblogs.com/hanwen/p/4212622.html​
浏览器报警告，Failed to decode downloaded font和OTS parsing error: Failed to convert WOFF 2.0 font to SFNT
习惯了想你的博客
05-17 7175
文章目录静态资源文件拦截字体报错 Failed to decode downloaded font 静态资源文件拦截 在整合一个前端框架到我的项目中的时候，浏览器报404，这个很容易解决，Spring拦截器给拦截了，在Spirng中配置一下不拦截规则即可。 配置Spring拦截规则 @Configuration public class WebMvcConfig implements WebMv...
推荐开源项目：WOFF到OTF字体转换器 - woff2otf
最新发布
gitblog_00007的博客
05-22 405
推荐开源项目：WOFF到OTF字体转换器 - woff2otf 项目地址:https://gitcode.com/hanikesn/woff2otf 在数字化设计的今天，字体格式的选择对网页和应用程序的性能有着重要影响。WOFF（Web Open Font Format）是一种常见的网络字体格式，而OTF（OpenType字体）则在更广泛的场景中被使用。今天，我们向您推荐一个实用的开源工具——wo...
php linux字体位置,php 为什么jpgraph在linux服务器上面报错找不到字体啊，我查看了linux服务器，没找到字体文件夹，怎么办?...
weixin_32865039的博客
05-12 188
满意答案ruoer09922013.10.29采纳率：40%等级：12已帮助：6568人你注意看一下，在jpgraph包下面有一个jpgraph.php文件，这个文件里面有几行是定义字体路径的:if (!defined('TTF_DIR')) {if (strstr( PHP_OS, 'WIN') ) {$sroot = getenv('SystemRoot');if( empty($sr...
解决在宝塔面板IIS服务器上部署svg/woff/woff2字体的问题
smddw的博客
10-28 1256
　　部署网站的字体和服务器IIS有什么关系?如果你的职责只限于一名前端开发，那么你可能很“幸福”地与这些问题擦肩而过，浑然不觉。可是本人一直都是孤军奋战，连开发环境都要自己搭建，这次又踩了新的坑，发现网站所用的woff、svg等字体压根就没被页面加载。反复排摸都不得其解，用浏览器访问服务器上的这些字体url，全都报404错误，只有ttf的字体能被访问到… 　　解决方法： 　　IIS不认SVG，...
解决Web部署 svg、woff、woff2字体 404错误
10-11
### 解决Web部署 SVG、WOFF、WOFF2 字体 404 错误 #### 问题背景 在Web开发过程中，为了提高网站的美观度和可读性，经常需要使用各种字体来优化文本展示效果。其中，SVG（可缩放矢量图形）、WOFF（Web Open Font ...
PingFangSC多版本（eot/woff2/woff/ttf）
07-15
提供了六个字重的多版本，font-family 定义如下： 苹方-简 常规体 font-family: PingFangSC-Regular, sans-serif; 苹方-简 细体 font-family: PingFangSC-Light, sans-serif; 苹方-简 中黑体 font-family: PingFang...
为IIS增加svg和woff等字体格式的MIME(2003、2008)
09-30
例如，SVG（Scalable Vector Graphics）是一种基于XML的矢量图像格式，WOFF（Web Open Font Format）则是专为Web设计的字体格式。当IIS遇到未知的文件类型时，它可能会返回错误，导致浏览器无法正确解析和显示内容。...
svgs2fonts：npm-svgs2fonts。svg图标转字体图标库（svgs-> svg，ttf，eot，woff，woff2），nodejs
02-05
svgs2fonts svg图标转字体图标库（svgs-> svg，ttf，eot，woff，woff2）。版本1.0.4安装npm i -g svgs2fonts验证svgs2fonts -v使用svgs2fonts {{srcpath}} {{distpath}} --options其中参数： srcpath：svg源文件路径...
Vue项目打包、注意事项、服务器nginx部署 & 解决跨域
Gooooa的博客
02-04 669
这里写自定义目录标题一、打包前注意事项：1. config/index.js中修改： `assetsPublicPath: './'` ，默认是`assetsPublicPath: '/'` 。否则会找不到静态资源2. build/utils.js中修改：加入`publicPath: '../../',`3. config/index.js中配置的 解决跨域问题 的 `“proxyTable”`代理服务 在打包后会失效。4. main.js配置：开发环境、生产环境接口地址配置二、打包（使用idea）三、 n
css外部加载字体文件,Css3引用外部字体文件
weixin_30104235的博客
08-03 415
css3引用外部字体文件，加载到页面后报错：Failed to decode downloaded font浏览器不能解析你下的字体吧？可以换浏览器试试，或者用别的字体看看1、每个浏览器支持的字体文件格式不一样，TTF/EOT/SVG/WOFF都要来一套。2、可能是字体文件受损了。Nginx服务器默认是没有支持字体的mime-type设置的，并且对.eot文件的mime-type也是不正确的。在配...
Failed to decode downloaded font问题解决
11-01 1万+
Failed to decode downloaded font问题解决 网站搬家后font文件突然出问题，报Failed to decode downloaded font错误，原来是iis配置问题 解决方案 添加 后缀名.woff，文件类型添加 application/x-font-woff 后罪名.ttf，文件类型添加application/x-font-truetype 添加后缀名....
解决 Failed to decode downloaded font
热门推荐
一个写了10年bug的程序员日常笔记。
06-05 4万+
使用Springboot+ bootstrap 开发做项目，在写页面时候出现按钮不展示，查看页面出现下面的我问题：因为经过maven的filter，会破坏font文件的二进制文件格式，到时前台解析出错。解决方案： &lt;resources&gt; &lt;resource&gt; &lt;directory&gt;src/main/reso...
Failed to decode downloaded font 问题解决
键圣的博客
10-26 4万+
描述：打开页面之后发现有的图标展示不出来 正常图标： 异常图标：                                               F12之后看到控制台打印了这些信息 Failed to decode downloaded font: http://localhost:8080/scheduler/assets/global/plugins/simple-li
CSS Failed to decode downloaded font, OTS parsing error: Failed to convert WOFF 2.0 font to SFNT
scribbler的专栏
04-07 1万+
最近在看一些关于Web前端的资料，在处理一个CSS中出现以下错误，以此记录。 我在WebStorm下编译一个工程，并在上加载索引页，我得到以下警告在在Chrome控制台： Failed to decode downloaded font: http://localhost:4200/assets/fonts/Simple-Line-Icons.woff2?v=2.4.0 OTS parsi
webpack svg to woff
05-17
要将 SVG 转换为 WOFF，您需要使用一个名为 `svg2woff` 的工具。以下是使用 webpack 配置的步骤： 1. 安装 `svg2woff` ``` npm install svg2woff --save-dev ``` 2. 在 webpack 配置中添加以下代码： ```javascript const svg2woff = require('svg2woff'); module.exports = { // ... module: { rules: [ { test: /\.svg$/, use: [ { loader: 'file-loader', options: { // 指定输出的文件名和路径 name: '[name].[ext]', outputPath: 'fonts/' }, }, { loader: 'webpack-svg-woff-loader', options: { // 根据需要设置字体的名称和样式 fontName: 'myFont', fontStyle: 'normal' }, }, ], }, ], }, // ... plugins: [ // 添加插件，将 SVG 转换为 WOFF new webpack.LoaderOptionsPlugin({ options: { svg2woff: { // 设置 WOFF 格式的字体文件名，必须与 file-loader 中的名称匹配 fileName: '[name].woff', // 设置字体格式 format: 'woff' }, }, // 注册自定义插件 postTransform: function (webpackConfig) { webpackConfig.module.rules.forEach(function (rule) { if (rule.loader === 'webpack-svg-woff-loader') { rule.options.svg2woff = webpackConfig.options.svg2woff; } }); return webpackConfig; }, }), ], }; ``` 上述代码中，我们使用了两个 loader： - `file-loader` 用于将 SVG 文件复制到指定的目录中，并返回 URL。 - `webpack-svg-woff-loader` 用于将 SVG 文件转换为 WOFF 字体。它依赖于 `svg2woff` 工具，它将字体文件写入到输出目录中。 我们还需要将 `svg2woff` 的选项传递给 `webpack-svg-woff-loader`，以便它知道如何将字体转换为 WOFF 格式。 3. 运行 webpack 运行 `webpack` 命令时，它将使用上述配置来编译您的代码，并将 SVG 文件转换为 WOFF 格式的字体文件。生成的文件将保存在输出目录中（在本例中为 `fonts` 目录）。 希望这可以帮助您将 SVG 转换为 WOFF，并在 webpack 中使用它们。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值