css 文件中字体的相对文件路径

2024-01-11

我有一个在标题中引用的样式表:

<link href="./css/stylesheet.css" rel="stylesheet">

除了以下特定代码之外,所有 css 都可以在其中运行:

@font-face {
    font-family: 'icomoon';
    src: url('fonts/icomoon.eot?hsw0h3');
    src: url('fonts/icomoon.eot?hsw0h3#iefix') format('embedded-opentype'),
        url('fonts/icomoon.ttf?hsw0h3') format('truetype'),
        url('fonts/icomoon.woff?hsw0h3') format('woff'),
        url('fonts/icomoon.svg?hsw0h3#icomoon') format('svg');
    font-weight: normal;
    font-style: normal;
}

当我把上面的@字体脸上面显示图标的页面中的 CSS 可以正常工作,但是当我将其放入 CSS 文件中时,它就停止工作了。最后我发现这可能是由于文件路径不正确造成的。

这是文件结构:

看这篇文章(https://css-tricks.com/quick-reminder-about-file-paths/ https://css-tricks.com/quick-reminder-about-file-paths/)看来我应该使用:

url('/fonts/icomoon.ttf?hsw0h3')
url('../fonts/icomoon.ttf?hsw0h3')

返回根目录,然后进入字体文件夹。但图标仍然没有从 CSS 文件渲染。

我做错了什么以及如何解决它?


CSS 文件中的 URL 是相对于 CSS 文件.

url('fonts/icomoon.eot?hsw0h3'); means http://example.com/css/fonts/icomoon.eot?hsw0h3,但是你的目录结构的屏幕截图显示你需要http://example.com/fonts/icomoon.eot?hsw0h3.

Add ../ or /

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

css 文件中字体的相对文件路径 的相关文章

  • 如何在 PHP 的 HTML 页面中显示错误消息?

    我有以下登录表单 login php 其中要求输入用户名和密码
  • 使用 highcharts 时,为什么 Bootstrap 选项卡显示宽度不正确的选项卡窗格 div?

    因此 我正在使用 Twitter 的 Bootstrap 创建一个包含选项卡式内容的页面 但我的起始活动 div 的内容始终与其他选项卡的内容不同 例如 我在不同的选项卡中使用 highcharts js 放入图表 但活动选项卡始终显示正确
  • 如何在 select2 下拉列表中换行?

    我正在使用 select 2 下拉菜单 然后在其内容中显示一些长句子 我想在句子的正确位置添加换行符 但下拉菜单是自动调整的 For example the content of the dropdown right now looks l
  • CSS:仅显示字符串的前两个字母

    是否可以使用纯 CSS 仅显示字符串的前两个字母 到目前为止我已经尝试过 没有成功 first letter 仅针对第一个字母 无论如何对我不起作用 nth of everything 需要额外的 javascript 文本溢出 省略号 正
  • 当共享相同的行和列时,将网格项设置为不重叠

    现在 当两个网格项共享相同的行和列时 它们会相互重叠 div class some grid container div Item 1 div div Item 2 div div 我如何让它们不重叠 当共享相同的行和列时 其行为可能类似于
  • 先按行再按列布局 div

    我有一个容器div and 3 div里面如下 div div 1 div div 2 div div 3 div div 不知道每一个的内容div内部 但它们的高度和宽度是可变的 集装箱的高度由最高的决定div inside 我想展示这些
  • 我如何能够以两行显示标题,并且每行的字体大小不同?

    我正在使用 Google Chart API 创建时间线图 并希望将图的标题修改为两行 问题 我如何能够显示具有不同字体大小的两线图表标题 电流输出 理想输出 相关研究 我唯一能找到的是有人试图用饼图来做到这一点 但我尝试了但无法使其发挥作
  • 如何隐藏div元素中太长的文本?

    如何隐藏 div 中的溢出 如果文本比 div 长 则文本将换行到新行 div style width 50px border 1px solid black test test test test div 也许是 CSS 属性text o
  • 如何使用 JavaScript 创建链接?

    我有一个标题字符串和一个链接字符串 我不知道如何将两者放在一起以使用 JavaScript 在页面上创建链接 任何帮助表示赞赏 我试图解决这个问题的原因是因为我有一个 RSS 源并且有一个标题和 URL 列表 我想将标题链接到 URL 以使
  • 在表格上使用上下文样式将点边框应用于特定单元格

    我以前有过问了一个问题 https stackoverflow com questions 6326266 issue with applying dotted border to cells in table design在这个问题上 你
  • 悬停此元素时隐藏元素后的伪元素

    我的菜单垂直放置在页面左侧和菜单之间 li 我有一个 after那是一个分隔符 我想要的是当我悬停元素本身 如果它是第一个元素 时隐藏 after 元素 或者当它是中间元素时隐藏上面和底部的元素 如果它是最后一个子元素 则隐藏 after前
  • 将图像作为框架放置在 iframe 周围?

    我有一个网站尝试以移动格式显示 但在宽屏幕上 我确信 iframe 是正确的选择 我正在尝试将 iframe 加载到 iPhone 的图像中 你可以看一个例子here http webfro gs south tour iframe tes
  • 如何在codeigniter中将上传图片比例限制为16:9?

    这是我用来上传图像的代码 this gt load gt library upload ext pathinfo file name PATHINFO EXTENSION img name now ext imgConfig upload
  • 删除子元素上的 CSS 过滤器

    我的 CSS 代码有问题 正如您所看到的 我在 li 元素上有过滤器 但它覆盖了其他元素 我需要使其他两个元素没有过滤器 有没有可能这样做 main width 300px height 300px background color blu
  • HTML5 MediaSource 适用于某些 mp4 文件,但不适用于其他文件(相同的编解码器)

    我正在玩 MediaSource API 代码直接取自 Mozilla 的示例页面 https developer mozilla org en US docs Web API MediaSource endOfStream https d
  • 尝试将数据存储在点击器网站中

    我正在尝试存储一个名为的变量score无论何时刷新 您都会一次又一次地使用它 我不明白的是它的代码是什么 我尝试了一些方法 但似乎都不起作用 这是我的答题器网站 但是当我尝试使用 JavaScript 来存储它时 它不起作用window o
  • 不可勾选的单选按钮与专有的复选框

    从 UI 角度来看 是拥有一组具有取消选中功能的单选按钮更好 还是拥有一组独占的复选框 意味着一次只能选中一个 更好 Update 我没想到对此会有如此负面的反应 如果我给出一个更接近其使用方式的示例 也许会有所帮助 我有一个充满数据绑定内
  • 如何创建适合屏幕宽度的等宽/高框? [复制]

    这个问题在这里已经有答案了 我正在尝试建立一个网站 其中有很多宽度和高度相等的框 例如 我有一个页面 其中并排有两个相同大小的框 简单的解决方案是将宽度和高度设置为 50vw 这在出现滚动条之前效果很好 我已经用谷歌搜索了几个小时 但无法理
  • 使用css bootstrap时如何仅向一列添加右边框?

    我正在尝试使用CSS引导框架 http getbootstrap com css tables在我的项目中 我正在使用带有以下类的表table table bordered table striped 我想删除除第一列之外的所有列的边框 这
  • 表格行未扩展到全宽

    我有一个表格 当我将表格的宽度设置为 100 并将表格行的宽度设置为 100 时 没有任何反应或宽度发生变化 Table Normal position relative display block margin 10px auto pad

随机推荐

  • 来自波浪线 SVG 的连续波浪动画

    我有一个 SVG 它是用 Adob e Illustrator 构建的波浪线 我正在尝试向其添加连续的波浪状动画 我尝试过 vivus js 并且能够使绘制动画工作 但不能连续工作 我怎样才能开始这样的事情呢 任何答案都可以 无论是纯 CS
  • 我可以使用 -ObjC 以外的链接器标志链接适用于 iOS 的 GoogleMaps SDK

    我正在使用 GoogleMapsSDK 和 Parse 的框架 如果我一起使用它们 由于链接器标志 ObjC Parse 中的错误会触发需要 facebook 键 这是 Parse 论坛和 GoogleMaps 之外的其他框架上有详细记录的
  • 活动菜单项 - asp.net mvc3 母版页

    我一直在四处扫描 试图找到一个合适的解决方案 将 活动 当前 类分配给母版页中的菜单项 关于是否执行此客户端与服务器端 这条线被从中间分开 说实话 我对 JavaScript 和 MVC 都很陌生 所以我没有什么意见 我更愿意以 最干净 和
  • 获取当前页面 url 并更改操作

    我需要给出当前页面 url 并更改操作 url 之后我想在视图文件中回显该内容 我想在视图文件中执行这些操作 而不是控制器 你有什么主意吗 您可以通过以下方式获取当前页面的 url uri Zend Controller Front get
  • jquery.get() - 使用数据作为全局变量的问题

    好吧 我在网上读了很多资料 但仍然没有找到解决我的问题的方法 我需要使用 jquery 方法 get 检查文件的内容是 nok 还是空 我尝试过的事情之一 当然不起作用 但清楚地表明了我的想法 是 document ready functi
  • tabControl 中的关闭按钮

    有没有人可以告诉我如何在 C 中使用 tabControl 在每个选项卡中添加关闭按钮 我计划使用按钮 pic 来替换我的选项卡中的 x 谢谢 无需派生类 这里有一个简洁的片段 http www dotnetthoughts net imp
  • 如何获取 AMP 网站上的查询字符串值?

    有没有办法从 AMP HTML 网站检索查询字符串值并将它们存储在 cookie 中或在链接中使用它们 Example 用户点击广告www example com amp foo bar 打开 AMP 网站 点击链接即可结帐 不是 AMPw
  • HTML 客户端可移植文件生成 - 无需外部资源或服务器调用

    我有以下情况 我在公司内部服务器上设置了一系列 Cron 作业来运行各种旨在检查数据完整性的 PHP 脚本 每个 PHP 脚本都会查询公司数据库 将返回的查询数据格式化为包含一个或多个
  • 如何在“expect script”中启动shell脚本?

    在这个expect脚本中 不会连接ssh服务器 我只想在本地执行一个 sh 文件 这可能吗 例如 bin expect command xxx sh a command which starts a certain shell script
  • 如何将 varchar 转换/转换为日期?

    我有一个数据类型的日期列varchar mm dd yyyy 在 MySQL 5 1 中 如何将其转换为 DATE 这是我到目前为止所拥有的 SELECT id date FROM tableName WHERE CAST SUBSTRIN
  • 画布圆圈看起来模糊

    这是对一些过时或不同问题的更新 例如 画布上的绘图和线条一样模糊 https stackoverflow com questions 8696631 canvas drawings like lines are blurry 如何修复 HT
  • 如何防止我的应用程序出现多个实例

    我发现了 Visual Basic 中的一个错误 在实践中 完成我的应用程序后 单击正常启动的可执行文件 但如果我再次单击可执行文件 exe 会莫名其妙地打开第二个窗口 不必要地启动两个进程 我想知道是否有一种方法 也许在某些设置中 仅当您
  • Google Sheet 插件 onInstall() 和 onOpen() 不起作用

    我正在尝试为 Google Sheets 创建一个附加组件 但运行时出现问题 该附加组件使用以下命令在 附加组件 菜单中创建附加菜单onOpen Google Drive API 的功能 但它不这样做onInstall 所以我被告知添加以下
  • Chrome 的词典自动完成扩展? [关闭]

    Closed 这个问题是无关 help closed questions 目前不接受答案 我尝试用谷歌搜索这个 但我没有任何运气 chrome 有拼写自动完成扩展吗 就像在 Eclipse 中输入时一样 System out pri 然后
  • WSDL 函数具有相同的名称。如何选择呢?

    我将提供程序 wsdl 与 SoapClient 一起使用 但是当我使用命令 getFunctions 时 我得到如下内容 method1Rsp service method1Req parameters method2Rsp servic
  • Django 和动态生成的图像

    我的 Django 应用程序中有一个视图 它使用 PIL 自动创建图像 将其存储在 Nginx 媒体服务器中 并返回一个带有指向其 url 的 img 标签的 html 模板 这工作正常 但我注意到一个问题 我每访问此视图 5 次 其中就有
  • 在主题内扩展 Magento 小部件布局

    我使用 Magento 2 的内置目录产品列表小部件将特色产品小部件添加到网站的主页 我希望做的是扩展在中找到的小部件的布局文件vendor magento module catolog widget etc widget xml这样我就可
  • 对于简单到中等复杂度的新项目,我应该选择 MvvmLight 还是 MvvmCross? [关闭]

    Closed 这个问题是基于意见的 help closed questions 目前不接受答案 我试图找到 MVVMlight 和 MVVMCrossthose 框架之间的主要区别 我计划为 Android 和 Windows Phone
  • 如何将树的结果传递或通过管道传输到Powershell?

    如何通过文件数组找到tree 有人居住吗 posh gt posh gt tree Get Item Directory home nicholas powershell Mode LastWriteTime Length Name d 2
  • css 文件中字体的相对文件路径

    我有一个在标题中引用的样式表 除了以下特定代码之外 所有 css 都可以在其中运行 font face font family icomoon src url fonts icomoon eot hsw0h3 src url fonts i