首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

css不适用于Chrome PC的字体可怕的fa堆栈问题

CSS(层叠样式表)是一种用于描述网页上元素样式的标记语言。它可以控制网页的布局、字体、颜色、大小、背景等方面的样式。然而,有时候在Chrome PC浏览器上,使用CSS设置字体时可能会遇到字体显示异常的问题,这被称为"fa堆栈问题"。

"fa堆栈问题"通常指的是使用FontAwesome字体图标库时出现的问题。FontAwesome是一个流行的图标字体库,它提供了各种矢量图标,可以通过CSS类名来使用。然而,由于Chrome PC浏览器对字体渲染的机制不同,有时候在使用FontAwesome字体图标时会出现字体显示不正常的情况。

解决这个问题的方法有以下几种:

  1. 使用最新版本的FontAwesome库:确保你使用的是最新版本的FontAwesome库,因为它们通常会修复一些字体显示问题。
  2. 使用其他字体图标库:如果FontAwesome在Chrome PC上出现问题,你可以尝试使用其他的字体图标库,例如Iconfont、Material Icons等。这些库也提供了丰富的图标资源,并且可能在Chrome PC上显示正常。
  3. 使用图片代替字体图标:如果你无法解决字体显示问题,你可以考虑使用图片代替字体图标。将图标导出为图片格式(如PNG),然后通过HTML的img标签来显示图标。

总结一下,CSS在Chrome PC上出现字体显示异常的问题通常是由于使用FontAwesome字体图标库时出现的"fa堆栈问题"。解决这个问题的方法包括使用最新版本的FontAwesome库、尝试其他字体图标库或使用图片代替字体图标。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

04-移动端开发教程-在线字体

为什么要用在线字体 问题 精灵图(雪碧图)用作背景时候不能轻易放大缩小。...在线字体 @font-face是CSS3中一个模块,他主要是把自己定义Web字体嵌入到你网页中,允许我们不依赖操作系统字体,做到全平台字体统一和定制。...TureTpe(.ttf)格式: .ttf字体是Windows和Mac最常见字体,是一种RAW格式,因此他不为网站优化,支持这种字体浏览器有【IE9+,Firefox3.5+,Chrome4+,...【IE4+】; SVG(.svg)格式: .svg字体是基于SVG字体渲染一种格式,支持这种字体浏览器有【Chrome4+,Safari3.1+,Opera10.0+,iOS Mobile Safari3.2.../font-awesome-4.7.0/css/font-awesome.css"> <i class="<em>fa</em> <em>fa</em>-camera-retro

3.2K60

在网站或桌面应用使用Font Awesome图标库

用于桌面系统 用于桌面系统,或需要一套完整矢量图,请查看备忘。 可适配于屏幕阅读器 与其它字体不同,Font Awesome不会影响屏幕阅读器正常工作。...一般程序猿,包括前端程序猿,估计只能去搜索了,不会自己拿ps画。 但是问题又来了,如果你搜索来是黑白,现在也用黑白,后期网站变化主题怎么办?...支持.ttf,iOS 4.2以下只支持SVG字体Chrome:除webkit支持以外,从Chrome 6开始,开始支持woff格式; Firefox:支持.ttf和.otf,从Firefox 3.6...网页中应用font-awesome: 去官网下载,解压之后,应该能看到“css”和“font”两个文件夹。css文件夹中存放着css文档,font文件夹中存放在着适用于不同浏览器字体文件。...(注意,在“fa-link”前面还要加入一个“fa”类,例如 ) 2.3 设置大小和颜色 学会了以上简单使用,设置颜色和大小非常简单,只要你会用css设置文字颜色和大小就行

2.1K20
  • 04-移动端开发教程-在线字体图标

    为什么要用在线字体 问题 精灵图(雪碧图)用作背景时候不能轻易放大缩小。...在线字体 @font-face是CSS3中一个模块,他主要是把自己定义Web字体嵌入到你网页中,允许我们不依赖操作系统字体,做到全平台字体统一和定制。...TureTpe(.ttf)格式: .ttf字体是Windows和Mac最常见字体,是一种RAW格式,因此他不为网站优化,支持这种字体浏览器有【IE9+,Firefox3.5+,Chrome4+,Safari3...【IE4+】; SVG(.svg)格式: .svg字体是基于SVG字体渲染一种格式,支持这种字体浏览器有【Chrome4+,Safari3.1+,Opera10.0+,iOS Mobile Safari3.2.../font-awesome-4.7.0/css/font-awesome.css"> <i class="<em>fa</em> <em>fa</em>-camera-retro

    3.2K60

    从零开始学 Web 之 CSS3(六)动画animation,Web字体

    @keyframes 规则用于创建动画。在 @keyframes 中规定某项 CSS 样式,就能创建由当前样式逐渐改为新样式动画效果。 使用 @keyframes关键字来创建动画。...TureTpe(.ttf)格式 .ttf字体是Windows和Mac最常见字体,是一种RAW格式,支持这种字体浏览器有IE9+、Firefox3.5+、Chrome4+、Safari3+、Opera10...下图为一个网站生成和下载web字体网站,点击立即使用就可以了: ? 下载下来之后,把下在下来所有文件导入自己项目,注意路径匹配问题。...="https://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.css"> 使用时候:和方法一一样,直接使用类属性 class='fa fa-play...--全屏图标--> 注意:class 样式 第一个 fa 是必写,表示是用 font-awesome 字体图标。

    1.4K10

    CSS中常见长度单位

    当前字体小写字母“x”高度 一般1ex=0.5*1em x-height通常是字体尺寸一半 in inch 英寸 绝对 1in=2.54cm 一般用于描述显示器大小(对角线长度...mm millimeter 毫米 cm centimeter 厘米 pt point 磅 1pt=1/72in≈0.3527mm 磅一般为重量单位,但是在印刷行业可作为长度单位,用于描述字体大小...pc pica 派卡 1pc=12pt, 6pc=1in=2.54cm 印刷行业用于描述字体大小 注意: (1)字体尺寸指的是什么?...(2)CSS中设置字体大小(font-size)请尽量使用em或者ex代替px,原因是用px做描述字体大小唯一致命缺点就是在IE下无法用浏览器字体缩放功能。 2....CSS3中新增度量单位 (1)ch——字符0(零)宽度; (2)rem——根元素(html元素)em; (3)vw——viewpoint width,视窗宽度,1vw等于视窗宽度1%;

    1.2K20

    Web 性能优化:Preload,Prefetch使用及在 Chrome优先级

    事件来提高性能 Web 性能优化:21种优化CSS和加快网站速度方法 Web 性能优化:理解及使用 JavaScript 缓存 今天,我们将深入研究Chrome 网络栈,以明确 web 加载原语(...Shopify 使用 preload 加载 Web字体后,Chrome 桌面版)文本绘制时间(1.2秒)提高了50%,这完全解决了他们文字闪动问题。 ?...在 preload 和 prefetch 之间,我们对当前页面或即将跳转页面在所需主要资源问题有了一个解决方案。...即使字体与页面位于同个域 下,也建议使用。也适用于其他域名获取(比如说默认异步获取)。...我们假设浏览器正在加载一个页面,页面中有个 CSS 文件,CSS 文件又引用一个字体库,对于这样场景, 若使用 HTTP/2 PUSH,当服务端获取到 HTML 文件后,知道以后客户端会需要字体文件,

    2.1K00

    身为程序猿——谷歌浏览器这些骚操作你真的废吗!【熬夜整理&建议收藏】

    听到这个问题我嘿嘿一笑(心想:难道网上还有我爬虫爬不到数据吗?难道妹妹没听过江湖流传一个传说——可见即可爬吗!)...手机-PC视图切换按钮(左边第二个): 启动该按钮,网页可以在pc网址网页和手机网址网页之间进行转换。...更重要是,双击html源码或者右侧css,可以更改网页外观,即可以对静态网页进行调试。...ALL:所有的请求 XHR(XmlHttpRequest对象js生成): js动态加载请求 JS: JS代码 Css: 样式 image: 图片 Media: 音频,视频 Font: 字体 DOC: 首页...当脚本中断时候,Scope(作用域)窗格将显示当前时刻所有当前定义属性。 第四部分:调用堆栈! 靠近边栏顶部是Call Stack(调用堆栈)窗格。

    2.4K30

    【程序猿硬核科普】Chrome控制台基本操作 | 谷歌浏览器控制台格式错乱解决方法

    元素(Elements):用于查看或修改HTML元素属性、CSS属性、监听事件、 断点等。css可以即时修改,即时显示,大大方便了开发者调试页面....源代码(Sources):该页面用于查看页面的HTML文件源代码、JavaScript源代码、 CSS源代码,此外最重要是可以调试JavaScript源代码,可以给JS代码添加断点等。...console.trace(object) 该函数将在控制台打印出从 console.trace() 被调用位置开始堆栈信息。 ?...样式 //附:console.log输出超链接会被自动识别并加上灰色字体颜色和下划线样式,而这个无法用%c覆盖 console.log('浩Coding %c 浩Coding','font-size...参考文章 1、有遇到chrome F12控制台样式错乱问题吗?

    6.9K11

    Webpack打包时将文件内联

    一些上报与回传打点代码需要内联; 3. 为了避免页页闪动,首屏渲染CSS代码需要内联; 4....减少HTTP网络请求次数,将小图片或字体文件直接内联; 在Webpack中内联html和javaScript代码可以通过raw-loader这个插件来完成 1....安装插件 npm i raw-loader@0.5.1 -D  需要注意是,这个插件最新版本存在一些问题,所以需要指定0.5这个版本。 2. 拆分需要内联HTML片段 <meta name="image" itemprop="image" content="https://pub.idqqimg.com/<em>pc</em>/misc/files/20170831/60b60446e34b40b98<em>fa</em>26afcc62a5f74...利用html-inline-<em>css</em>-webpack-plugin插件; 这种方式用<em>的</em>会更加广泛一点,这个插件可以将<em>CSS</em>代码打包成chunk形式以后内联到head标签之间。

    46320

    移动端适配大法

    ,这时像PC端有些固定宽高布局方式显然不适应,我们被要求对于不同大小手机页面能自适应,真是非常有(tong)趣(ku)呢~ 话不多说,下面就总结了一些移动端常用适配手法: 一、百分比 使用场景:只要求宽度随屏幕自适应...,比如文字块 百分比在PC端自适应上也经常用到,着实相当好用,但它一般用于宽度自适应设置,高度设置百分比时,要求其父类元素有明确高度。...根据不同屏幕大小设置根字体大小有两种方法: 1、css方法设置rem 利用媒体查询,根据不同屏幕大小进行设置,缺点就是一般只列举一些代表性屏幕大小,自适应不能充分覆盖所有范围 html{...b) 由于chrome最小字体是12px,又为了计算方便,所以可以设置1rem大小为20px 应用过程中,比如我们拿到了一个750设计稿,那么首先,将设计稿里数值除以2,得到按手机屏幕大小布局数值...vw,vh确实很好用,但是目前使用时仍需考虑兼容性问题,在国内一些手机自带浏览器里(比如华为)会失效,并且据说碰上X5内核时也容易踩坑 。

    2.7K20

    Edge 拥抱 Chromium 对前端工程师意味着什么?

    # Javascript 字体加载 API 对于某些人来说这有很大意义。目前所有现代浏览器都支持 CSS font-display 属性。但是你可能仍然希望用 JavaScript 加载字体。...我不禁觉得不令人感到不适应该是网站默认设置,因为并非所有用户都会知道这个设置存在。 ? # CSS caret-color 属性 这是一个相当简单功能,可以安全、轻松地用作渐进增强功能。...# CSS will-change 属性 will-change 属性可用于性能优化,提前通知浏览器元素 will change。...对 BrowserStack 需求将会略微减少。 # 我们会失去什么? 据我所知,SVG颜色字体将不再适用于 Edge 浏览器。...很多 PC 用户完全不习惯使用 Internet Explorer。希望改进后 Edge 能够吸引他们。

    1.3K30

    CSS字体相关小技巧

    这使得网页开发者可以自由选择字体名称,而毋庸担心与给定用户环境中存在字体名产生冲突。 规范中如此定义是因为选择出与每个用户环境不产生冲突名字这件事想想就十分可怕!...我们再次参考下规范: local中放入是一串特定格式字符串,这串字符串用于唯一标识庞大字体族中一套字体。...对于OpenType类型和TrueType类型字体,这个字符串分别是用于匹配本地可用字体名称表中Postscript名称或是完整字体名称。...接下来让我们通过一些简洁明了demo和测试用例来更好理解一下 更新:我之后不久发现System Font CSS项目在2015年使用了这种方法,好像早于Facebook实现 实例演示 注:下面的demo...同样也不再需要在你CSS中为 font-family属性赋其他杂乱值了。简单而有效!

    1.3K40

    静态布局、自适应布局、流式布局、响应式布局、弹性布局等概念和区别

    - 前端开发) 优点:这种布局方式对设计师和CSS编写者来说都是最简单,亦没有兼容性问题。 缺点:显而易见,即不能根据用户屏幕尺寸做出不同表现。...这种布局方式在Web前端开发早期历史上,用来应对不同尺寸PC屏幕(那时屏幕尺寸差异不会太大),在当今移动端开发也是常用布局方式,但缺点明显:主要问题是如果屏幕尺度跨度太大,那么在相对其原始设计而言过小或过大屏幕上不能正常显示...流式布局是用于解决类似的设备不同分辨率之间兼容(一般分辨率差异较少);响应式是用于解决不用设备之间不用分辨率之间兼容问题(一般是指PC,平板,手机等设备之间较大分辨率差异)。...4、浏览器默认字体高度一般为16px,即1em:16px,但是 1:16 比例不方便计算,为了使单位em/rem更直观,CSS编写者常常将页面跟节点字体设为62.5%,比如选择用rem控制字体时,先需要设置根节点...,因为chrome不支持小于12px字体,计算小于12px时候,会默认取12px去计算,导致chromeem/rem计算不准确。

    10.4K33

    Apriso 开发葵花宝典之四 CSS

    本文介绍Process builder开发过程中CSS样式应用。 样式引入和应用 层叠样式表(CSS)是一种样式表语言,用于描述用标记语言编写文档表示。...在Apriso Process builder开发过程中,在HTML选项卡中,CSS样式应用于每个Operation实例,在CSS选项卡中,同一个操作所有实例只应用一次CSS样式。...这取决于: 客户端设备类型(移动或PC/笔记本) 在Central Configuration.xml中Theme设置 界面内容,来自Portal (M&M屏幕)还是函数解释器(FI) CSS Framework...样式分类和样式名称整理如下(详见http://[ServerName]/Apriso/Help/en-us/CSS/index.htm): Awesome Font字体图标用法 Font Awesome...主要用于不同宽度图标无法对齐情况。尤其在列表或导航时起到重要作用。

    27430

    Chrome Devtools

    (‘contentEditable’,’true’); 2.chrome 网页全屏、元素截图 (1)移动端 点击右上角三个点 里面的full即可全屏截图 (2)pc端 打开devtools ctrl+shift...,选择“Edit breakpoint”就可以写上你想出现调试条件表达式 (2)在sources面板 现在要断点代码 ctrl+shift+e 在控制台运行当前选中代码片段 4.将修改后CSS保存到文件...(1)点击你编辑CSS文件名称,进入到Sources面板,你会发现你修改已经在里面了。...然后你可以对你实时编辑进行保存。 这个修改不适用于添加新选择器,也不适用于element.style属性,仅仅适用于原有选择器。 5.轻松获取某个审查元素引用 ?...8.Chrome Workspace (1) 在sources面板中, 通过 Workspace,你可以把本地服务器资源映射为硬盘上文件,实现调试 JS 和 CSS 同时自动保存文件,比如 Elements

    1.1K20

    Web页面全链路性能优化指南

    以及Chrome都为我们提供了哪些性能相关工具,如何使用。 Chrome Performance(性能) Performance既是一个Chrome工具,可用于性能检测。...正在排队:网络请求队列排队时间 已停止:阻塞住用于处理其他事情时间 DNS查找:用于DNS解析IP地址时间 初始连接:创建TCP连接时间 SSL:用于SSL协商时间 已发送请求:用于发送请求时间...不适合色彩丰富图片,因为无损储存会导致储存体积大于jpeg。 gif 适合动画、可以动图标。支持纯透明但不支持半透明,不适合色彩丰富图片。...通过chrome性能(Performance)工具查看每个函数执行性能并优化。 字体优化 FOUT(Flash of Unstyled Text)等待一段时间,如果没加载完成,先显示默认。.../ /* fa11back 缩短不显示时间,如果没加载完毕用默认,和b1ock类似* /* optional 替换可能用字体 可能不替换*/ } article

    1.7K10

    Chrome 新功能 — CSS Overview 尝鲜

    Chrome 又带来了一个新非常实用实验功能! 现在,我们可以大致了解 CSS 在网站上使用情况,包括网站使用了多少颜色、未使用声明数量甚至到定义媒体查询总数。...或F1) 点击打开 Experiment 部分 启用 CSS Overview ? 关闭设置后,我们会在 DevTools 菜单栏中获得一个新 CSS Overview 选项卡。 ?...注意,该报告分为多个部分,包括颜色,字体信息,未使用声明和媒体查询。我们可以在唾手可得少量空间中获得大量信息。 这是一个非常棒功能,对吧?我非常喜欢这样功能。...想想这不仅能帮助我们作为前端更好开发,还能帮助我们与设计师合作。比如设计师可以打开这个功能,检查我们工作,以确保从调色板到字体堆栈所有内容都井井有条。...了解更多:https://css-tricks.com/new-in-chrome-css-overview/

    60730
    领券