.woff2/svg/woff文件报404错误

本文介绍了解决在IIS服务器上部署项目时遇到的woff2字体文件404错误的方法,包括修改IIS的MIME类型映射和web.config配置,适用于IIS6和IIS7版本。

最近项目中用到了fontawesome-webfont.woff2等字体。部署项目后,项目中提示的woff2字体文件404找不到,虽然不影响项目,对我这种强迫症简直不能忍,但是路径对应的项目文件是存在的,

原因:因为服务器IIS不认SVG,WOFF/WOFF2 这几个文件类型。
所以,找了两个方法:1、修改iis的 mime映射的,2、修改 web.config的。

详细如下:
一、IIS的修改方法
​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

二、web.comfig的配置

  <system.webServer>
    <staticContent>
      <remove fileExtension=".woff2"/>
      <mimeMap fileExtension=".woff2" mimeType="application/x-font-woff2" />
    </staticContent>

[<style> @font-face{font-family:DNMrHsV173Pd4pgy;font-display:block;src:url(https://lf6-awef.bytetos.com/obj/awesome-font/c/dc027189e0ba4cd.woff2)format("woff2"),url(https://lf3-awef.bytetos.com/obj/awesome-font/c/dc027189e0ba4cd.woff2)format("woff2"),url(https://lf6-awef.bytetos.com/obj/awesome-font/c/dc027189e0ba4cd.woff)format("woff"),url(https://lf3-awef.bytetos.com/obj/awesome-font/c/dc027189e0ba4cd.woff)format("woff"),url(https://lf6-awef.bytetos.com/obj/awesome-font/c/dc027189e0ba4cd.otf)format("opentype"),url(https://lf3-awef.bytetos.com/obj/awesome-font/c/dc027189e0ba4cd.otf)format("opentype");font-weight:400;}@font-face{font-family:DNMrHsV173Pd4pgy;font-display:block;src:url(https://lf6-awef.bytetos.com/obj/awesome-font/c/dc027189e0ba4cd-500.woff2)format("woff2"),url(https://lf3-awef.bytetos.com/obj/awesome-font/c/dc027189e0ba4cd-500.woff2)format("woff2"),url(https://lf6-awef.bytetos.com/obj/awesome-font/c/dc027189e0ba4cd-500.woff)format("woff"),url(https://lf3-awef.bytetos.com/obj/awesome-font/c/dc027189e0ba4cd-500.woff)format("woff"),url(https://lf6-awef.bytetos.com/obj/awesome-font/c/dc027189e0ba4cd-500.otf)format("opentype"),url(https://lf3-awef.bytetos.com/obj/awesome-font/c/dc027189e0ba4cd-500.otf)format("opentype");font-weight:500;}@font-face{font-family:DNMrHsV173Pd4pgy;font-display:block;src:url(https://lf6-awef.bytetos.com/obj/awesome-font/c/dc027189e0ba4cd-700.woff2)format("woff2"),url(https://lf3-awef.bytetos.com/obj/awesome-font/c/dc027189e0ba4cd-700.woff2)format("woff2"),url(https://lf6-awef.bytetos.com/obj/awesome-font/c/dc027189e0ba4cd-700.woff)format("woff"),url(https://lf3-awef.bytetos.com/obj/awesome-font/c/dc027189e0ba4cd-700.woff)format("woff"),url(https://lf6-awef.bytetos.com/obj/awesome-font/c/dc027189e0ba4cd-700.otf)format("opentype"),url(https://lf3-awef.bytetos.com/obj/awesome-font/c/dc027189e0ba4cd-700.otf)format("opentype");font-weight:700;} .font-DNMrHsV173Pd4pgy { font-family: DNMrHsV173Pd4pgy, -apple-system, 'PingFang SC', 'Microsoft YaHei', 'Helvetica Neue', Helvetica, Arial, sans-serif; } </style>, <style>.serial-filter-gray{filter:grayscale(100%);-webkit-filter:grayscale(100%);-moz-filter:grayscale(100%);-ms-filter:grayscale(100%);-o-filter:grayscale(100%);filter:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'><filter id='grayscale'><feColorMatrix type='matrix' values='0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0'/></filter></svg>#grayscale");-webkit-filter:grayscale(1)}</style>] 提取到@font-face 中url
06-23
以下是提取 `@font-face` 中 `url` 的解决方案。 ### 解决方案 我们可以使用正则表达式来匹配 `@font-face` 中的 `src` 属性,并从中提取所有字体文件的 URL。以下是一个 Python 实现: ```python import re # 给定的 CSS 内容 css_content = """ <style> @font-face{font-family:DNMrHsV173Pd4pgy;font-display:block;src:url(https://lf6-awef.bytetos.com/obj/awesome-font/c/dc027189e0ba4cd.woff2)format("woff2"),url(https://lf3-awef.bytetos.com/obj/awesome-font/c/dc027189e0ba4cd.woff2)format("woff2"),url(https://lf6-awef.bytetos.com/obj/awesome-font/c/dc027189e0ba4cd.woff)format("woff"),url(https://lf3-awef.bytetos.com/obj/awesome-font/c/dc027189e0ba4cd.woff)format("woff"),url(https://lf6-awef.bytetos.com/obj/awesome-font/c/dc027189e0ba4cd.otf)format("opentype"),url(https://lf3-awef.bytetos.com/obj/awesome-font/c/dc027189e0ba4cd.otf)format("opentype");font-weight:400;} @font-face{font-family:DNMrHsV173Pd4pgy;font-display:block;src:url(https://lf6-awef.bytetos.com/obj/awesome-font/c/dc027189e0ba4cd-500.woff2)format("woff2"),url(https://lf3-awef.bytetos.com/obj/awesome-font/c/dc027189e0ba4cd-500.woff2)format("woff2"),url(https://lf6-awef.bytetos.com/obj/awesome-font/c/dc027189e0ba4cd-500.woff)format("woff"),url(https://lf3-awef.bytetos.com/obj/awesome-font/c/dc027189e0ba4cd-500.woff)format("woff"),url(https://lf6-awef.bytetos.com/obj/awesome-font/c/dc027189e0ba4cd-500.otf)format("opentype"),url(https://lf3-awef.bytetos.com/obj/awesome-font/c/dc027189e0ba4cd-500.otf)format("opentype");font-weight:500;} @font-face{font-family:DNMrHsV173Pd4pgy;font-display:block;src:url(https://lf6-awef.bytetos.com/obj/awesome-font/c/dc027189e0ba4cd-700.woff2)format("woff2"),url(https://lf3-awef.bytetos.com/obj/awesome-font/c/dc027189e0ba4cd-700.woff2)format("woff2"),url(https://lf6-awef.bytetos.com/obj/awesome-font/c/dc027189e0ba4cd-700.woff)format("woff"),url(https://lf3-awef.bytetos.com/obj/awesome-font/c/dc027189e0ba4cd-700.woff)format("woff"),url(https://lf6-awef.bytetos.com/obj/awesome-font/c/dc027189e0ba4cd-700.otf)format("opentype"),url(https://lf3-awef.bytetos.com/obj/awesome-font/c/dc027189e0ba4cd-700.otf)format("opentype");font-weight:700;} .font-DNMrHsV173Pd4pgy { font-family: DNMrHsV173Pd4pgy, -apple-system, 'PingFang SC', 'Microsoft YaHei', 'Helvetica Neue', Helvetica, Arial, sans-serif; } </style> <style>.serial-filter-gray{filter:grayscale(100%);-webkit-filter:grayscale(100%);-moz-filter:grayscale(100%);-ms-filter:grayscale(100%);-o-filter:grayscale(100%);filter:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'><filter id='grayscale'><feColorMatrix type='matrix' values='0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0'/></filter></svg>#grayscale");-webkit-filter:grayscale(1)}</style> """ # 使用正则表达式提取 @font-face 中的 url def extract_font_urls(css_content): # 匹配 src 属性中的所有 url pattern = r"url\(([^)]+)\)" matches = re.findall(pattern, css_content) # 去掉可能存在的引号 urls = [match.strip("'\"") for match in matches] return urls # 调用函数并打印结果 font_urls = extract_font_urls(css_content) print("提取到的字体文件URL列表:") for url in font_urls: print(url) ``` --- ### 代码解释 1. **正则表达式**: - `r"url\(([^)]+)\)"`:匹配 `url()` 中的内容。 - `url\(` 和 `\)`:匹配 `url(` 和 `)`。 - `([^)]+)`:匹配括号内的任意字符,直到遇到右括号为止。 2. **清理 URL**: - 提取到的 URL 可能带有引号(如 `'` 或 `"`),因此我们使用 `strip("'\"")` 去掉多余的引号。 3. **返回结果**: - 将所有提取到的 URL 存储在列表中,并逐一打印。 --- ### 输出结果 运行上述代码后,将得到如下输出: ``` 提取到的字体文件URL列表: https://lf6-awef.bytetos.com/obj/awesome-font/c/dc027189e0ba4cd.woff2 https://lf3-awef.bytetos.com/obj/awesome-font/c/dc027189e0ba4cd.woff2 https://lf6-awef.bytetos.com/obj/awesome-font/c/dc027189e0ba4cd.woff https://lf3-awef.bytetos.com/obj/awesome-font/c/dc027189e0ba4cd.woff https://lf6-awef.bytetos.com/obj/awesome-font/c/dc027189e0ba4cd.otf https://lf3-awef.bytetos.com/obj/awesome-font/c/dc027189e0ba4cd.otf https://lf6-awef.bytetos.com/obj/awesome-font/c/dc027189e0ba4cd-500.woff2 ... ``` --- ###
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值