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

最新推荐文章于 2024-12-10 09:41:05 发布
原创 最新推荐文章于 2024-12-10 09:41:05 发布 · 1.1k 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#no #字体

本文介绍了解决网站中woff和svg字体无法加载的问题，通过在web.config文件中配置正确的MIME类型来确保字体资源能够被正确加载，进而使网站上的图标和其他字体元素能够正常显示。

网站字体不能正常显示.  发现网站所用的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 1606
可以从以下两方面来查找问题的原因。 ① 点击“浏览器的”中“查看”按钮，选择“文字大小”，将其选为“中”。 ②单击“控制面板”中的“Internet选项”，在“Internet选项”窗口的常规标签下，单击“辅助功能”按钮。在弹出的“辅助功能”窗口中把 “不使用Web页中指定的它体大小”等项前面的选择框取消。 track:http://eblog.cersp.com/user...
Windows 10新字体无效？别急，这就来帮你解决！
nntxthml的博客
12-10 1683
遇到Windows 10上新字体无效的问题时，不必过于担心。通过检查并启动Windows Defender Firewall服务、修改注册表以禁用防间谍软件功能、检查字体文件完整性和系统权限，以及尝试其他附加方法，你通常可以解决这个问题。记得在进行系统修改前备份重要数据，以防万一。希望本文能帮助你恢复字体的正常使用，享受更加丰富的文字排版体验！
Chrome 浏览器字体不显示问题
damaolly的专栏
08-27 2万+
项目在其他浏览器中都能正常显示，唯独在Chrome中显示
Win10系统无法安装字体显示字体无效
yxh6533的博客
03-20 1万+
原因：没有启动防火墙服务，启动防火墙服务就可以了。我的是这个问题，可能有其他情况。
我获取到的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文件中指定该字体作为...
<template> <view class="container"> <view class="main-content">1111</view> <view class="footer" style="display: flex;"> <view v-for="(item, index) in navItems" :key="index" @click="ClickNav(index)" style="flex: 1; text-align: center;" > <view style="padding: 15px 0px 10px 0px;"> <!-- 使用自定义字体图标 --> <text class="custom-icon" :style="{ color: navState === index ? '#3B82F6' : '#64748B' }">{{ item.icon }}</text> <view :style="{ fontSize: '11px', color: navState === index ? '#3B82F6' : '#64748B', margin: '0 auto' }">{{ item.title }}</view> </view> <view class="dhl_box" :style="{ backgroundColor: navState === index ? '#3B82F6' : 'transparent' }"></view> </view> </view> </view> </template> <script> export default { data() { return { username: uni.getStorageSync('username'), navState: 0, navItems: [ { icon: '\ue601', title: '实时信息' }, { icon: '\ue621', title: '参数配置' }, { icon: '\ue60b', title: '其他设置' }, { icon: '\ue645', title: '其他功能' } ] } }, methods: { ClickNav(i) { this.navState = i; console.log('切换到导航项:', i); } } } </script> <style> /* 引入自定义字体（确保路径正确） */ @font-face { font-family: 'CustomFont'; src: url('~@/static/fonts/custom-font.ttf') format('truetype'); } .custom-icon { font-family: 'CustomFont'; font-size: 25px; } .dhl_box { height: 2px; width: 20px; margin: 0 auto; border-radius: 1px; } </style> 我现在需要在main-content处显示别的vue页面，点击导航栏切换不同页面，请帮我实现
最新发布
08-20
代码调整如下：</think>要实现点击导航栏切换 `main-content` 区域显示不同页面的功能，可以使用动态组件或路由跳转两种方式。以下是完整的实现方案： ### 方案一：使用动态组件（推荐） ```html <template> ...
解决 Edge 浏览器中文字不显示的问题
技术探秘者的博客
01-17 7810
当在 Edge 浏览器中遇到文字不显示的问题时，可能是由于以下几个原因引起的：字体设置问题、缓存问题、浏览器扩展或插件冲突、操作系统或浏览器更新问题等。
在Win11中安装字体显示无效怎么解决
avdsGSIG的博客
05-22 6569
如果以上方法都不能解决问题，建议查阅Windows 11的官方文档或联系微软的技术支持以获取更多帮助。在Windows 11中安装字体时显示无效，可能是由多种原因导致的。
网页中的文字无法正常显示
qicha3481的博客
01-08 1058
我的网页用IE7、8打开都很正常，但是用IE6打开时，会出现一些文字无法正常显示，比如： 首页 >> 化妆品 >> 护肤系列 >> 洁面 >> 青年人(20-35) >> 油型肌肤类型 >> 欧莱雅 >>  在IE6打开时这样的： 首页 >> 化妆品 >> 护肤系列 >> 洁面 >> 青年?20-35) >> 油型肌肤类型 >> 欧莱 >>  就是“人(”变成了“?”，欧莱雅的
系统无法安装字体，复制到FONTS无效(出现提示：字体对系统无效)
热门推荐
huangyinkuck
12-21 6万+
问题:          从网上下载字体后可以复制到控制面板的字体中，但WORD、EXCEL、PHOTOSHOP等操作系统仍然无此字体。而且控制面板的字体打开后，“文件”项里没有“安装新的字体”一项。   解决方法(从网络上搜索,此方法很用):          XP系统无法安装字体有两个原因： 原因一：是desktop.ini文件受损或被误删。        你可以打开windows
网页中汉字不能正常显示的问题
weixin_34234823的博客
09-03 821
修改了一个模板，在浏览器中显示时发生错误，汉字显示为？？？。胡乱改了一通，仍没解决问题。最后找来申明师兄解决了问题： 在HEAD部分修改下面代码 < http-equiv="content-type" content="text/html;charset=iso-8859-2" /> 为 < http-equiv="content-type" content="t...
页面文字出现错乱
m0_61353839的博客
01-29 643
理论上 html这个标签语言与系统语言不符时，才会出翻译的询问或者走用户设置的自动翻译功能。因此将 lang设置成正确语言即可。3、在不想被翻译的元素中加入class=“notranslate”， 可以是html、div 等各种元素。2、在 meta 标签中禁用。
解决网页引用的字体 css设置后浏览器没有会不显示的情况
weixin_34361881的博客
03-24 2011
<!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 677
当JavaScript网页打开后没有显示文字时，可以通过检查HTML结构和标签、CSS样式、JavaScript代码、字体和编码以及网络连接和资源加载来解决问题。确保你的代码正确，资源文件能够成功加载，并且浏览器能够正确地解析和显示文本内容。如果你在JavaScript代码中做了某些操作来改变文本内容的显示方式，那么确保你的代码没有错误。最后，确保你的网络连接正常，所有的资源文件（例如CSS文件、JavaScript文件和字体文件）都能够正确地加载。这可能是由于各种原因造成的，包括错误的代码或问题引起的。
使用font-awesome图标，css元素选择器（i）下，部分设置不生效的问题之解决。
Beijiyang
06-22 3581
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、付费专栏及课程。

余额充值