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

为什么字体很棒的图标显示的图标太小,而且偏离中心?

字体很棒的图标显示的图标太小且偏离中心的原因可能有以下几个方面:

  1. 字体大小设置不正确:字体图标是通过字体文件中的特殊字符来显示的,因此在使用时需要设置正确的字体大小。如果字体大小设置过小,就会导致图标显示的过小。建议根据实际需求调整字体大小。
  2. 字体图标的字体文件未加载或加载失败:字体图标通常是通过在网页中引入字体文件来显示的。如果字体文件未加载或加载失败,就无法正确显示字体图标。可以检查字体文件的路径是否正确,并确保字体文件能够成功加载。
  3. 字体图标的样式设置不正确:字体图标通常通过CSS样式来设置,包括字体族、字体大小、颜色等。如果样式设置不正确,就可能导致图标显示异常。可以检查样式设置是否正确,并根据需要进行调整。
  4. 字体图标的使用方式不正确:字体图标可以通过Unicode字符或CSS类名来使用。如果使用方式不正确,就可能导致图标显示异常。可以参考字体图标的文档或使用指南,确保正确使用字体图标。
  5. 页面布局或样式冲突:有时,页面的布局或其他样式可能与字体图标的显示产生冲突,导致图标显示异常。可以检查页面布局和其他样式,排除可能的冲突因素。

总结起来,字体很棒的图标显示的图标太小且偏离中心可能是由于字体大小设置不正确、字体文件加载失败、样式设置不正确、使用方式不正确或页面布局样式冲突等原因所致。在使用字体图标时,需要仔细检查和调整相关设置,以确保图标能够正确显示。

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

相关·内容

zblog未开启https后台不显示字体图标,提示“拒绝加载字体”错误的解决办法

“拒绝加载字体'/zb_system/image/icon/zblog.ttf?...最初我也以为是服务器设置问题导致不能加载字体文件,于是乎我在NGINX服务加上了字体的格式,如图: 因为我很清醒的记着在win服务器里面,需要在IIS服务器上添加MIME类型,但是Linux我记得不需要...,所以这个操作没有意义,设置完成后重载、重启Nginx服务器都是无效的,后来还特意百度了下http网站是否可以加载https资源,得到的答案是肯定滴,但是https不能加载http资源,这点好理解,但是后台为什么一直提示错误呢...呼呼原来如此,安全增强不仅仅是网站安全性还包括了https方面的,具体关闭方法如下: 后台,网站设置-全局设置-安全增强(灰色关闭) 如图关闭之后刷新页面,清空缓存编译,再加上强制更新(Ctrl+F5)图标显示正常...requests”设置为 Disabled 如图: 然后重启浏览器,就OK啦,好了再有其他问题留言反馈给我,当然如果您的网站还是出现其他的错误那么建议你开启https访问吧,毕竟这是一个趋势而且HTTP3.0

1.9K10
  • 自定义Linux桌面,还有这么多玩法?

    之后,您可以从软件中心安装GNOME Tweak工具。只需打开软件中心并搜索GNOME Tweaks,然后从那里安装它: ?...但是,如果要更改为新安装的主题,则必须安装GNOME Tweaks工具。 您可以在外观部分找到主题和图标设置。您可以浏览可用的主题和图标,并设置您需要和喜欢的。这些变化会立即生效。 ?...03 控制桌面图标 至少在Ubuntu中,您会在桌面上看到Home和Trash图标。如果您不喜欢,可以选择禁用它。您还可以选择设置要在桌面上显示的图标。 ?...05 更改字体和缩放比例 您可以在Ubuntu中安装新字体,并使用Tweaks工具应用系统范围的字体更改。如果您认为桌面上的图标、文本太小,也可以更改缩放比例。...08 确定顶部面板中显示什么 桌面顶部的面板显示了一些重要的信息。您具有日历、网络图标、系统设置和“活动”选项。 您还可以显示电池百分比、添加日期、日期和时间以及显示星期数。

    2.8K10

    FontAwesome Icon图标和文字水平对齐以及设备自适应解决方案

    在给新站美化插入font图标的时候,总是和文字对不齐。尝试常规方法后不行那只能用最笨的方法来写。实例如下:图片css代码font-size: 21px!...important;/*字体强制大小*/left:30%; /*偏离左侧30%位置显示*/line-height: 1.42857!...important; /*强制设置行高*/position: absolute;具体适配需要结合自己调整这样写虽然能把图标和文字随意对齐,不过会导致不同设备窗口下显示异常(因为值是写死的)。...接下来说一下自适应, 真的是笨蛋的方法。因为写下来太繁琐了。首先要去新建一个css类,然后在fa图标类 class 最后引入这个类。在样式表里在分别写自适应设备的css。属实麻烦。...important;/*字体强制大小*/left:30%; /*偏离左侧30%位置显示*/line-height: 1.42857!

    2.3K10

    rept——一个可以一键成图的神奇函数!

    今天想跟大家分享一个特别有趣的函数——rept函数。 ▼ 这个函数,就如同它的名字一样,具有重复显示字符的功能。...B57=rept(A57,10) 确定之后,B57就自动显示10个1,当然一百个,一千个一万个也可以轻松搞定。 ? 不要觉得这个功能没什么,如果是重复显示一些特殊的字体呢?...小人儿(webdings字体) ? 注意在数据量较大的时候,要在rept第二个参数上同比例将重复显示次数进行放大缩小,因为数据太大图标字体会超出单元格范围,太小(比如0.001)则会显示0个。 ?...特殊字体中会有很多微型图标字体,譬如常见的公路标识、场馆标识、标点符号等。 推荐几款: webdings windings1 windings2 windings3 在插入——符号中可以找到: ?...图标字体需要自行下载(可以查看一下你的office字体库中是否带有,没有需要自行下载,下载之后将TTC、或者ttf格式字体复制到C/W/fonts/就可以了) 图标字体在ppt页面、excel单元格表格以及项目符号这几个方面用处非常大

    87150

    UI界面图标终极设计指南

    因为它可以让图标在这些显示屏上更加清晰。 如果为图标设置1像素的边框,这个时候,这些边框应该使用外部或内部的描边样式,但不建议是居中的。如下图,你可以看到他们的区别。...居中描边的一像素边框,虽然在放大它们的时候,它们看起来很清晰。但在100%比例大小显示的时候,它们会模糊掉。...当图标具有不同的细节层次时,更复杂的图标会吸引用户更多的注意力,而且视觉上看上去更重。 4 控制最小的间隙尺寸 图标的相邻元素之间空间在整个图标集中不应太小或不一致。...比如下方的图标,太小的间隙,所产生的粘滞感要特别注意: 下面这个则是调整后的效果,是不是好多了? 对于线性图标来说,图标线段的最小间隙应该等于线的粗度。另外,线条应该明确的分开或者准确的闭合连接。...下面的这个图标在Sketch中看起来很棒,但是....... 我们把Sketch生成的SVG图标在AI中打开的时候,你会发现它的图层非常混乱。

    89420

    UI界面图标终极设计指南

    因为它可以让图标在这些显示屏上更加清晰。 ? ? 如果为图标设置1像素的边框,这个时候,这些边框应该使用外部或内部的描边样式,但不建议是居中的。如下图,你可以看到他们的区别。 ? ?...居中描边的一像素边框,虽然在放大它们的时候,它们看起来很清晰。但在100%比例大小显示的时候,它们会模糊掉。所以,慎用~下面两张图是图标在居中描边的时候所产生的效果: ? ?...当图标具有不同的细节层次时,更复杂的图标会吸引用户更多的注意力,而且视觉上看上去更重。 ? 4 控制最小的间隙尺寸 图标的相邻元素之间空间在整个图标集中不应太小或不一致。...比如下方的图标,太小的间隙,所产生的粘滞感要特别注意: ? 下面这个则是调整后的效果,是不是好多了? ? 对于线性图标来说,图标线段的最小间隙应该等于线的粗度。...下面的这个图标在Sketch中看起来很棒,但是....... ? 我们把Sketch生成的SVG图标在AI中打开的时候,你会发现它的图层非常混乱。

    1.1K50

    移动体验设计6大禁

    我们一开始为什么去安装应用程序?是为了使我们的生活更方便。但当一个应用无法满足这一要求时,用户肯定就会离它而去。一个应用的成功是受多种因素影响的,其中整体移动用户体验是最重要的影响因素。...安卓的Material design(左)vs. ios(右),图片来源:tutsplus 字体也需要遵循每个平台的标准:安卓使用Roboto字体,iOS使用San Francisco字体系列。...Facebook安卓版app里的“忘记密码?”按钮 3、不要在用户下载应用程序后立即要求评分 没有人想要被打断,尤其是当一些没用的东西出现在显示重要内容的中间位置时。...这是一个询问用户反馈的极好时机,因为此时他们刚刚清空了待办事项列表,准备退出应用程序。” ? 请求用户反馈并没有错,但是请记住你要给用户提供一个很棒的体验。...结论 人们对于应用程序有很高的期望,而且标准越来越高。因此你需要努力去达到这些期望,并且使你的应用程序更加令人愉悦,而不是令人厌烦。提高用户体验不是一次性的任务,它是一个持续性的工作。

    2.2K130

    分享八个免费的Vue图标库,轻松修饰你的应用

    Vue Material Design Github地址: https://github.com/robcresswell/vue-material-design-icons 这是一个很棒的库,它可以帮助你在...Vue项目中使用Material Design 图标 该库不仅有出色的文档,而且用这些图标入门很容易。...它的每个图标作为单个文件组件,所以可以准确导入每个Vue项目所需的图标。 而且,该库使用的是SVG图标,所以可以轻松更改来自定义自己喜欢的图标 ?...6. iView 这个我觉得就算我不介绍也有很多人知道,这个库在平时的开发中经常遇到,而且它也内置了许多组件和图标,同时也对不同的字体,图标大小,元素大小有良好的支持 官网 :https://www.iviewui.com...Icomoon Icomoon是超级流行的图标库,谷歌和苹果等一些主要公司都在使用它。它提供了大量的SVG图标和图标字体,同时也有很多高级的付费选项,可以将其混合搭配以找到理想的图标。

    8K21

    视觉调整-设计师 vs. 逻辑

    “正确”的播放图标并没有显得不平衡,然而它很明显偏移了中心很多,而不是一点点。为什么?视觉权重。视觉权重或者重量重心偏左一点,这就造成了视觉上的不平衡,就是它实际上并没有。...左边的图标和文字使用相同的颜色,左侧的使用不同的颜色。为了做到相同的视觉感觉,我在sketch中加深了文字“HSB”值。 这看来很微妙,但是你可以看到图标比文字看起来颜色深一点。...我推荐在你的设计中使用HSB | HSL值,除去其他优势,这样可以使用“L”和“B”来快速调整颜色的亮度。 规模 规模时我们大脑对于物体包含字体尺寸的感知。...这是一个微调的元素——上下增加了1px直到它感觉正确。 注意曲线上下的狄多点已经高于X字高,低于基线,同样的你可以看到7个字母。 这在字体设计中很常见,字母曲线可能会超过大写字母高度低于基线等。...如果你使用Garamond字体写一行,然后在基线和X字高画两道线,你会发现曲线会超过这两条线。如果这些超出不存在,你就会发现这些字母相对于旁边的字母显得太小。

    55810

    论一个图表的自我修养

    昨天给大家讲解了商务图表制作中的黄金原则——最大化数据墨水比。 今天继续给大家解构图表的元素布局! 商务图表作为表达业务数据的重要方式,需要遵循基本的元素布局和视觉顺序。...以上图表布局存在着诸多缺点: ❶默认标题不够醒目 ❷图表区与绘图区之间剩余太多空白区域 ❸图例区在图标右侧偏离视线中心 我们再看下一幅元素布局合理、规范、标准的图表样式: ?...通过以上规范的图表案例我们可以总结出一幅专业的商务图表所具备的基本元素主要有: 主标题、副标题、图例(视情况而定)、 绘图区、脚注 而且这几种元素最好能按照直线顺序摆放,从而使得阅读者的视线能够一次性顺序检索而不需要目光跳跃或者来回检索...这样将会大大提高图表的可阅读性和表达效果。 同时图表中所用到的字母、数字、汉字的字体要统一(统一衬线或者非衬线,字体要与业务性质匹配) 下图是本案例默认图表经过美化和规范后的效果: ?...如果能够尝试遵循这些原则并适当运用到自己的图表制作中去,相信你的图表也可以变的更加专业!!!

    716110

    (附静电的思考和吐槽)

    —————————————————— 8pt网格(栅格)系统可以用于平面设计,图标,或者页面布局。 ? 在本文中,我会说服你为什么要使用8pt的网格系统,因为这是最好的定位网格系统。...尽管字体大小可能会发生变化并且偏离8倍,但重要的是行高不会。例如,段落字体大小可以为15像素,但行高应为8的倍数,因此24px是可以接受的值。 ?...在Ui设计领域,作者仅仅从图标和文字角度解释了为什么需要使用8的倍数来进行设计,无非是换算中比较容易一些。但是我的观点是:如果不使用8pt网格系统,除了换算容易之外,还有什么其它优势吗?...其次,现在的手机ppi越来越高,也就是说显示精度越来越高,为何之前有人反馈图标糊,其中最大的原因就是输出的图标为位图,而屏幕精度不够高比如(240ppi或者320ppi),在这种精度的设备上或多或少会有亚像素的情况发生...但是现在随着 4k显示器的普及,手机屏幕的分辨率和精度的提高,这种糊的感觉已经非常弱化。因此,除非是像素眼,我们已经很难观察到图标亚像素的存在。

    2.9K20

    深度揭秘可部署矢量字体图标管理平台YIcon

    2px,辅助线条1px(由于方形本身视觉上看起来比圆形大,因此在同一范围内方形要往中心点收缩一部分才会让两者在视觉上保持一致)。...什么是字体图标 利用字体工具把我们平时 Web 上用的图形图标(icons)转换成 web fonts,就成了 icon fonts,它可以借助 CSS 的 @font-face 嵌入到网页里,用以显示...为什么要制作字体图标 ● 字体是矢量化图形,它天生具有「分辨率无关」的特性,在任何分辨率和PPI下面,都可以做到完美缩放,不会像传统位图, 如:png,jpeg,放大后有锯齿或模糊现象。...如何制作字体图标 我们现在用的字体图标平台是阿里巴巴旗下的Iconfont,我们先来看一下它的制作指南。...这样我们就会在我的图标内看到刚刚上传的图标,字体图标就上传成功了 如何把字体图标给到开发 通常开发要用字体图标,会找到设计师。

    1K10

    高清ICON SVG解决方案(上) - 腾讯ISUX

    2.iconfont字体图标 在很多国外的响应式站点里一般会采用iconfont,因为可以直接通过font-size和color属性来控制icon的大小和颜色,非常方便,而且由于iconfont本身就是字体文件...正因为如此这个技术在推进过程中遇到许多困难,因为在很多场景下图标确实会较小甚至小于16px,而且有些16px的图标如果复杂度较高,iconfont实现出来的icon会经常出现看不清的情况,而且国内PC用户是占最多的...为什么iconfont会出现锯齿?...上面说了这么多关于字体渲染机制原理,在这里能得出一个结论: 不管目前使用什么字体渲染技术,字体显示效果始终是会出现锯齿的。...从Chrome和FF下的显示效果,我们看到SVG画的ICON的质量确实是比iconfont要好,iconfont做的图标,我截图后放大后看到线的边缘发虚了,这是因为字体渲染的原因导致,在FF下也是发虚,

    3.3K40

    7个设计师必知的图标设计原理,收藏了!

    纽约市地铁标志(来源:《纽约市交通管理局图形标准手册》 最理想的状态是,图标不仅对于一组人来说易于理解,而且在不同的文化,年龄和背景下都是通用的。考虑一下您的用户,并使用与之产生共鸣的隐喻和色彩。...Google Maps的图标非常出色-可读性很棒: ? Google Map图标 003.对齐 为确保每个图标感觉平衡,请精确的将他们对齐。 ?...在此播放图标中,尽管三角形按看起来放置在圆的中心,但我们的眼睛却误认为是不对齐的。三角形的较宽部分感觉比左侧“重”,所以我们要手工进行一些调整。...就像排版人员进行细微调整以在字体中创造平衡的视觉效果一样(请注意“ i”和“ j”上的偏心点,以及“ O”上的过冲点), ? -设计师会进行类似的调整以平衡图标。...006.个性 每个图标集都有其独特的风格。是什么让它与众不同?它对品牌有何影响?它会让用户产生什么心情?我们都需要反复考究。 ? Waze图标 Waze为什么受欢迎,在很大程度上取决于其图像设计。

    1.3K10

    B端产品设计规范

    后台系统在字体选择,中文:微软雅黑;英文:Arial即可。 标题类一律用Medium,以突出层级关系,让信息更清晰。 原因:字重 Medium 兼容性更强,在用微软雅黑这种字体时也能较好的显示正文。...所有字体样式颜色组合需要尽量通过 3:1 的 WCAG AA 标准。 图标的思考:如下图所示。 图标现在是制作完成后,上传到阿里巴巴的字体图标库中。前端调用起来更方便,调整图标的大小和颜色就好。...图标尺寸的思考: 在制作图标时,尺寸以偶数尺寸为准。 为保证图标的显示效果,最小尺寸为 16px。 为保证 Web 页面的整体效果,图标的最大使用以不超过 48px 为准。...可在Web端高度定制可視化图表,图表种类多,动态可视化设计效果很棒。...阿里DataV 天猫双十一大屏就用DataV做的,是阿里云的拖拽式可視化工具,主要用于业务数据与地理信息融合的大数据可視化,像一些展览中心,企业管控中心使用。

    4.4K46

    提高 JavaScript 开发效率的高级 VSCode 扩展之二!

    从集成的工具到文本编辑器,你的编辑器看起来几乎是平的和无缝的。 想象一个史诗般的主题加上史诗般的图标。 Material Theme Icons 是替换默认 VSCode 图标的绝佳选择。...设计的大型图标目录与主题融为一体,使其更加美观,这有助于你在资源管理器中轻松找到你的文件。 ? 2....你可以尝试 Fira Code,它非常棒而且是开源的。 以下是引入 Fira Code 后在 VSCode 辊更改该字体的方法。...自定义标题栏 这是一个很棒的视觉调整,改变了不同项目的标题栏颜色,以便轻松识别它们。...在你输入代码时,它将立即运行你的代码,并在代码编辑器中显示各种执行结果。 ? Quokka 的一个很棒的扩展插件,当你准备技术面试时,你可以输出每个步骤,而不必在调试器中设置断点。

    1.8K30

    Microsoft Office LTSC 2021 for Mac(office系列全套装)v16.64中文激活版

    这显然是为提高平板用户体验,做出的一次改进。亮点6:双屏显示兼容性改进在office 2021的选项面板中,你会看到一项新增加的“多显示器显示优化”功能。...现在很多人的桌面上都摆放了两台显示器,或者将笔记本与一台桌面显示器相联。...但如果你的文档中嵌入了一些老旧控件,则可能在移动时出现比例太大或比例太小的异常现象。有了这个选项,就可以通过切换到“针对兼容性优化”,关闭这一功能。...亮点7:自带中文汉仪字库之前小编一直很羡慕Wps的云字体功能,尤其在进行一些排版类工作时,这一特性真的非常非常实用。在office 2021中,我发现微软又新增加了几款内置字体。...这些字体全部属于汉仪字库,都是一些书法感很强的字体风格。狗年到了!用word写个对联,你会发现比以前方便多了。

    68920

    Office LTSC 2021 for Mac(office全家桶)v16.65中文版

    这显然是为提高平板用户体验,做出的一次改进。6、双屏显示兼容性改进在office 2021的选项面板中,你会看到一项新增加的“多显示器显示优化”功能。...现在很多人的桌面上都摆放了两台显示器,或者将笔记本与一台桌面显示器相联。...但如果你的文档中嵌入了一些老旧控件,则可能在移动时出现比例太大或比例太小的异常现象。有了这个选项,就可以通过切换到“针对兼容性优化”,关闭这一功能。...7、自带中文汉仪字库之前小编一直很羡慕WPS的云字体功能,尤其在进行一些排版类工作时,这一特性真的非常非常实用。在office 2021中,我发现微软又新增加了几款内置字体。...这些字体全部属于汉仪字库,都是一些书法感很强的字体风格。狗年到了!用word写个对联,你会发现比以前方便多了。

    67120
    领券