Fonts display<网站字体不能正常显示>

最新推荐文章于 2024-12-10 09:41:05 发布
最新推荐文章于 2024-12-10 09:41:05 发布
阅读量1.1k 收藏
点赞数
CC 4.0 BY-SA版权
分类专栏： 每天遇到的问题 文章标签： no 字体
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/csuxuting/article/details/48651795
本文介绍了解决网站中woff和svg字体无法加载的问题，通过在web.config文件中配置正确的MIME类型来确保字体资源能够被正确加载，进而使网站上的图标和其他字体元素能够正常显示。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

网站字体不能正常显示.  发现网站所用的woff、svg等字体压根就没被页面加载。反复排摸都不得其解，用浏览器访问服务器上的这些字体url，全都报404错误，只有ttf的字体能被访问到…  

在web.config文件里面做如下设置: 

<?xml version="1.0" encoding="utf-8"?>
<configuration>
  <system.webServer>
  <staticContent>
  <remove fileExtension=".woff"/>
  <remove fileExtension=".svg"/>
  <remove fileExtension=".woff2"/>
     <mimeMap fileExtension=".woff" mimeType="application/x-font-woff" />
     <mimeMap fileExtension=".svg" mimeType="image/svg+xml" />
     <mimeMap fileExtension=".woff2" mimeType="application/x-font-woff" />
  </staticContent>
  </system.webServer>
</configuration>

下面是效果图， 之前那些图标都是框， 属于无法正常显示； 



解决IE网页字体显示不正常
04-15
IE字体有时显示不正常，字体看起来很小，无论怎样修改都无效。
电脑网页中的字体怎么显示不正常了怎么办？
若水汪洋的java学习博客
09-25 1592
可以从以下两方面来查找问题的原因。 ① 点击“浏览器的”中“查看”按钮，选择“文字大小”，将其选为“中”。 ②单击“控制面板”中的“Internet选项”，在“Internet选项”窗口的常规标签下，单击“辅助功能”按钮。在弹出的“辅助功能”窗口中把 “不使用Web页中指定的它体大小”等项前面的选择框取消。 track:http://eblog.cersp.com/user...
Chrome 浏览器字体不显示问题
damaolly的专栏
08-27 2万+
项目在其他浏览器中都能正常显示，唯独在Chrome中显示
Win10系统无法安装字体显示字体无效
yxh6533的博客
03-20 1万+
原因：没有启动防火墙服务，启动防火墙服务就可以了。我的是这个问题，可能有其他情况。
解决 Edge 浏览器中文字不显示的问题
技术探秘者的博客
01-17 7208
当在 Edge 浏览器中遇到文字不显示的问题时，可能是由于以下几个原因引起的：字体设置问题、缓存问题、浏览器扩展或插件冲突、操作系统或浏览器更新问题等。
我获取到的html字符串是<style>table, td { border: 1px solid black; }</style><table><tr><td>陕西源创街区商业运营管理有限公司</td><td></td><td></td><td></td><td></td><td></td></tr><tr><td>缴费单</td><td></td><td></td><td></td><td></td><td></td></tr><tr><td>致: To:</td><td>门店测试</td><td></td><td></td><td>合同号:</td><td>Oya-001</td></tr><tr><td>租户名称Name:</td><td>柳斌</td><td></td><td></td><td></td><td></td></tr><tr><td>店铺名称</td><td>门店测试</td><td></td><td></td><td></td><td></td></tr><tr><td>铺位号 Unit:</td><td>1F-17</td><td></td><td></td><td></td><td></td></tr><tr><td>面积：</td><td>128.00㎡</td><td></td><td></td><td></td><td></td></tr><tr><td>一、商户应交费用合计:</td><td></td><td></td><td></td><td></td><td></td></tr><tr><td>账项说明 Description</td><td>期间 Period</td><td>货币 Currency</td><td>金额 Amount</td><td>未付金额 PayAmount</td><td>备注 Comment</td></tr><tr><td>基本租金</td><td>2025-04-30至2026-04-29</td><td>CNY</td><td>307200.00</td><td>307200.00</td><td></td></tr><tr><td>物业服务费</td><td>2025-04-30至2025-10-29</td><td>CNY</td><td>7680.00</td>，还缺少啥吗
04-25
<artifactId>openhtmltopdf-core</artifactId> <version>1.1.6</version> </dependency> <!-- PDFBox适配 --> <dependency> <groupId>com.openhtmltopdf</groupId> <artifactId>openhtmltopdf-pdfbox</...
<!-- iText 相关依赖 --> <dependency> <groupId>com.itextpdf</groupId> <artifactId>font-asian</artifactId> <version>7.1.16</version> <scope>compile</scope> </dependency> <dependency> <groupId>com.itextpdf</groupId> <artifactId>svg</artifactId> <version>7.1.16</version> <scope>compile</scope> </dependency> <dependency> <groupId>com.itextpdf</groupId> <artifactId>html2pdf</artifactId> <version>3.0.3</version> <scope>compile</scope> </dependency> <dependency> <groupId>com.itextpdf</groupId> <artifactId>io</artifactId> <version>7.1.16</version> <scope>compile</scope> </dependency> <dependency> <groupId>com.itextpdf</groupId> <artifactId>kernel</artifactId> <version>7.1.16</version> <scope>compile</scope> </dependency> <dependency> <groupId>com.itextpdf</groupId> <artifactId>layout</artifactId> <version>7.1.16</version> <scope>compile</scope> </dependency> <dependency> <groupId>com.itextpdf</groupId> <artifactId>styled-xml-parser</artifactId> <version>7.1.16</version> <scope>compile</scope> </dependency> <dependency> <groupId>com.itextpdf</groupId> <artifactId>itextpdf</artifactId> <version>7.1.16</version> <scope>compile</scope> </dependency>使用这些依赖，转PDF的时候 ，表格渲染不来，请分析
03-26
当使用 `html2pdf` 和亚洲字符集（如中文）时，可能需要显式加载并嵌入合适的字体文件以确保正确显示[^1]。可以通过以下方式配置： ```java FontProvider fontProvider = new FontProvider(); fontProvider.add...
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1.0"> <title>vue-demo-01</title> </head> <body> <div id="app"></div> <!-- built files will be auto injected --> </body> </html>
05-18
<link href="https://fonts.googleapis.com/css?family=Roboto&display=swap" rel="stylesheet"> <title><%= htmlWebpackPlugin.options.title %></title> </head> <body> <div id="app"></div> </body> </html> ...
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>网页1</title> <style> /* 仅添加最基本的表格边框 */ table { border: 1px solid #000; /*表格边框的颜色*/ margin-top: 10px; } td { padding: 5px;/**/ border: 1px solid #000; } p{ color: blue; } </style> </head> <body> <h1>王静代码作业第一页</h1> <p>网页一段落</p> <img src="奶龙01.gif" height="300px"> <ul> <li>列表01</li> <li>列表02</li> <li>列表03</li> <li>列表04</li> <li>列表05</li> </ul> <table> <tr><td>第一行数据</td><td>第一行数据</td></tr> <tr><td>第二行数据</td><td>第一行数据</td></tr> <tr><td>第三行数据</td><td>第一行数据</td></tr> <tr><td>第四行数据</td><td>第一行数据</td></tr> <tr><td>第五行数据</td><td>第一行数据</td></tr> </table> <a href="index02.html">网页2</a> <a href="index03.html">网页3</a> </body> </html>帮我美化一下
05-26
例如，在`<head>`部分加入以下代码以加载自定义字体： ```html <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" rel="stylesheet"> ``` 随后在CSS文件中指定该字体作为...
请你帮我把这个运行成可下载的PDF：<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Research Hypothesis: MgSO₄ in Chemotherapy-Induced Neuropathic Pain</title> <script src="https://cdn.jsdelivr.net/npm/mermaid@10.6.1/dist/mermaid.min.js"></script> <style> body { font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; background-color: #f8f9fa; margin: 0; padding: 20px; display: flex; flex-direction: column; align-items: center; } .container { max-width: 1200px; width: 100%; background-color: white; border-radius: 10px; box-shadow: 0 4px 20px rgba(0,0,0,0.1); padding: 30px; margin-top: 20px; } header { text-align: center; margin-bottom: 30px; border-bottom: 2px solid #3498db; padding-bottom: 20px; } h1 { color: #2c3e50; margin-bottom: 10px; } .subtitle { color: #7f8c8d; font-size: 1.2em; margin-top: 0; } .diagram-container { width: 100%; min-height: 500px; background-color: #f5f7fa; border-radius: 8px; padding: 20px; margin: 20px 0; } .legend { display: flex; justify-content: center; flex-wrap: wrap; gap: 15px; margin: 20px 0; padding: 15px; background-color: #e8f4fc; border-radius: 8px; } .legend-item { display: flex; align-items: center; gap: 8px; font-size: 14px; } .color-box { width: 20px; height: 20px; border-radius: 4px; } .key-points { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 20px; margin-top: 30px; } .card { background-color: #f8f9fa; border-left: 4px solid #3498db; padding: 15px; border-radius: 4px; } .card h3 { margin-top: 0; color: #2c3e50; } footer { text-align: center; margin-top: 30px; color: #7f8c8d; font-size: 0.9em; padding-top: 20px; border-top: 1px solid #ecf0f1; } @media print { body { padding: 0; margin: 0; } .container { box-shadow: none; padding: 10px; } .no-print { display: none; } } </style> </head> <body> <div class="container"> <header> <h1>Research Hypothesis: MgSO₄ in Chemotherapy-Induced Neuropathic Pain (CINP)</h1> <p class="subtitle">Mechanism of Action and Protective Effects</p> </header> <div class="diagram-container"> <div class="mermaid"> flowchart TD %% Chemotherapy Induction A[Oxaliplatin<br>Chemotherapy] --> B %% Core Mechanism Pathway subgraph B[Chemotherapy-Induced Neuropathic Pain] direction TB C[TNF-α Release] --> D[TNFR1 Activation] D --> E[Fyn Kinase Activation] E --> F[NR2B Phosphorylation<br>(pTyr1472)] F --> G[NMDA Receptor<br>Hyperactivation] G --> H[Ca²⁺ Influx] H --> I[Neuronal Apoptosis] H --> J[Autophagy Flux<br>Disruption] I --> K[Neuropathic Pain] J --> K end %% Magnesium Intervention L[MgSO₄ Intervention] -->|Inhibits NF-κB Pathway| C L -->|Blocks Ion Channel| G %% Pain Outcome K --> M((Persistent<br>Neuropathic Pain)) %% Style enhancements classDef chem fill:#f8d7da,stroke:#721c24,color:#721c24; classDef process fill:#cfe2ff,stroke:#052c65,color:#052c65; classDef effect fill:#fff3cd,stroke:#856404,color:#856404; classDef pain fill:#d1ecf1,stroke:#0c5460,color:#0c5460; classDef intervention fill:#d4edda,stroke:#155724,color:#155724; class A chem; class B process; class C,D,E,F,G process; class H,I,J effect; class K,M pain; class L intervention; </div> </div> <div class="legend"> <div class="legend-item"> <div class="color-box" style="background-color: #f8d7da;"></div> <span>Chemotherapy Induction</span> </div> <div class="legend-item"> <div class="color-box" style="background-color: #cfe2ff;"></div> <span>Core Molecular Processes</span> </div> <div class="legend-item"> <div class="color-box" style="background-color: #fff3cd;"></div> <span>Cellular Effects</span> </div> <div class="legend-item"> <div class="color-box" style="background-color: #d1ecf1;"></div> <span>Pain Outcome</span> </div> <div class="legend-item"> <div class="color-box" style="background-color: #d4edda;"></div> <span>MgSO₄ Intervention</span> </div> </div> <div class="key-points"> <div class="card"> <h3>Core Pathogenic Mechanism</h3> <p>The "TNF-α → pNR2B-NMDA → Cellular Damage" axis is central to chemotherapy-induced neuropathic pain development:</p> <ul> <li>TNF-α activates TNFR1 receptors</li> <li>Fyn kinase phosphorylates NR2B subunit (pTyr1472)</li> <li>NMDA receptor hyperfunction causes Ca²⁺ overload</li> <li>Leads to neuronal apoptosis & autophagy disruption</li> </ul> </div> <div class="card"> <h3>MgSO₄ Dual-Action Intervention</h3> <p>Magnesium sulfate provides dual protective effects:</p> <ul> <li><strong>Anti-inflammatory action:</strong> Inhibits TNF-α release via NF-κB pathway suppression</li> <li><strong>Receptor modulation:</strong> Blocks NMDA receptor ion channel as non-competitive antagonist</li> <li>Targets both arms of the pathogenic pathway</li> </ul> </div> <div class="card"> <h3>Research Implications</h3> <p>This study will validate:</p> <ul> <li>The causal relationship in the TNF-α/pNR2B pathway</li> <li>MgSO₄ efficacy in preventing CINP development</li> <li>Downstream cellular protection mechanisms</li> <li>Potential for clinical translation</li> </ul> </div> </div> </div> <footer class="no-print"> <p>This diagram illustrates the proposed mechanism of chemotherapy-induced neuropathic pain and the protective effects of magnesium sulfate</p> <p>To save as PDF: Use browser's Print function and select "Save as PDF"</p> </footer> <script> mermaid.initialize({ startOnLoad: true, theme: 'default', flowchart: { useMaxWidth: true, curve: 'linear', nodeSpacing: 50, rankSpacing: 70 }, securityLevel: 'loose' }); </script> </body> </html>
最新发布
07-22
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+SC&display=swap" rel="stylesheet"> ``` 3. **PDF 模糊问题优化**： - 添加设备缩放参数（解决引用[4]提到的模糊问题）： ```javascript ...
在Win11中安装字体显示无效怎么解决
avdsGSIG的博客
05-22 5862
如果以上方法都不能解决问题，建议查阅Windows 11的官方文档或联系微软的技术支持以获取更多帮助。在Windows 11中安装字体时显示无效，可能是由多种原因导致的。
网页中的文字无法正常显示
qicha3481的博客
01-08 1054
我的网页用IE7、8打开都很正常，但是用IE6打开时，会出现一些文字无法正常显示，比如： 首页 >> 化妆品 >> 护肤系列 >> 洁面 >> 青年人(20-35) >> 油型肌肤类型 >> 欧莱雅 >>  在IE6打开时这样的： 首页 >> 化妆品 >> 护肤系列 >> 洁面 >> 青年?20-35) >> 油型肌肤类型 >> 欧莱 >>  就是“人(”变成了“?”，欧莱雅的
系统无法安装字体，复制到FONTS无效(出现提示：字体对系统无效)
热门推荐
huangyinkuck
12-21 6万+
问题:          从网上下载字体后可以复制到控制面板的字体中，但WORD、EXCEL、PHOTOSHOP等操作系统仍然无此字体。而且控制面板的字体打开后，“文件”项里没有“安装新的字体”一项。   解决方法(从网络上搜索,此方法很用):          XP系统无法安装字体有两个原因： 原因一：是desktop.ini文件受损或被误删。        你可以打开windows
Windows 10新字体无效？别急，这就来帮你解决！
nntxthml的博客
12-10 1573
遇到Windows 10上新字体无效的问题时，不必过于担心。通过检查并启动Windows Defender Firewall服务、修改注册表以禁用防间谍软件功能、检查字体文件完整性和系统权限，以及尝试其他附加方法，你通常可以解决这个问题。记得在进行系统修改前备份重要数据，以防万一。希望本文能帮助你恢复字体的正常使用，享受更加丰富的文字排版体验！
网页中汉字不能正常显示的问题
weixin_34234823的博客
09-03 812
修改了一个模板，在浏览器中显示时发生错误，汉字显示为？？？。胡乱改了一通，仍没解决问题。最后找来申明师兄解决了问题： 在HEAD部分修改下面代码 < http-equiv="content-type" content="text/html;charset=iso-8859-2" /> 为 < http-equiv="content-type" content="t...
页面文字出现错乱
m0_61353839的博客
01-29 606
理论上 html这个标签语言与系统语言不符时，才会出翻译的询问或者走用户设置的自动翻译功能。因此将 lang设置成正确语言即可。3、在不想被翻译的元素中加入class=“notranslate”， 可以是html、div 等各种元素。2、在 meta 标签中禁用。
解决网页引用的字体 css设置后浏览器没有会不显示的情况
weixin_34361881的博客
03-24 2007
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <htmlxmlns="http://www.w3.org/1999/xhtml"> <head&gt...
解决JavaScript网页打开后没有显示文字的问题
2301_79326891的博客
09-22 652
当JavaScript网页打开后没有显示文字时，可以通过检查HTML结构和标签、CSS样式、JavaScript代码、字体和编码以及网络连接和资源加载来解决问题。确保你的代码正确，资源文件能够成功加载，并且浏览器能够正确地解析和显示文本内容。如果你在JavaScript代码中做了某些操作来改变文本内容的显示方式，那么确保你的代码没有错误。最后，确保你的网络连接正常，所有的资源文件（例如CSS文件、JavaScript文件和字体文件）都能够正确地加载。这可能是由于各种原因造成的，包括错误的代码或问题引起的。
使用font-awesome图标，css元素选择器（i）下，部分设置不生效的问题之解决。
Beijiyang
06-22 3567
index.html中使用font-awesome图标，发现在scss中使用元素选择器，选择i标签： 结果只有color生效； display设置为块元素,font-size设置大小都未生效。 （代码与效果见图一图二） 解决方法： 其一，在index.html文件，i标签内部通过style来设置。缺点是，在大量修改时手动操作多； （代码与效果见图三图四）（对第一个图标“首页
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值