开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

有没有办法使用CSS让字体图标看起来更细/更瘦？

是的，可以使用CSS来让字体图标看起来更细/更瘦。以下是一些常用的方法：

字体加粗：使用CSS的font-weight属性将字体加粗，可以使字体图标看起来更粗。例如，设置font-weight: bold;。
字体缩放：使用CSS的transform属性对字体进行缩放，可以使字体图标看起来更细。例如，设置transform: scale(0.8);。
字体轮廓：使用CSS的text-stroke属性为字体添加轮廓线，可以使字体图标看起来更粗。例如，设置text-stroke: 1px #000;。
字体间距：使用CSS的letter-spacing属性调整字体间距，可以使字体图标看起来更瘦。例如，设置letter-spacing: -1px;。
字体样式：选择适合的字体样式，如细字体或轻字体，可以使字体图标看起来更细。例如，使用font-family: "Helvetica Neue", sans-serif;。

这些方法可以根据具体情况进行组合使用，以达到所需的效果。请注意，不同的字体图标库可能具有不同的CSS属性和样式，具体使用方法请参考相应的文档。

腾讯云相关产品推荐：

腾讯云字体库：提供丰富的字体资源，包括细字体和轻字体等，可根据需求选择合适的字体图标。详情请参考：腾讯云字体库
腾讯云CDN加速：加速字体文件的传输，提高字体图标加载速度和渲染效果。详情请参考：腾讯云CDN加速
腾讯云Web应用防火墙（WAF）：保护网站免受恶意攻击，确保字体图标的安全性和可靠性。详情请参考：腾讯云Web应用防火墙（WAF）

相关搜索:我使用的是一个页面视图，它的子页面是具有动态长度的网格视图，这使得页面变得滞后，有没有办法让它更平滑？有没有办法让Geany IDE中的图标更亮？有没有更有效或更简洁的方式来使用tidyr::gather来让我的数据看起来“整洁”？mysql不支持外键 mysql的外键约束 mysql约束有哪些 mysql 经纬度字段经纬度 mysql 怎么修改mysql数据库引擎查询mysql是否锁表

相关搜索:

页面内容是否对你有帮助？

有帮助

没帮助

相关·内容

开发 | 想让小程序变得更漂亮？一招教你使用图标字体

文 | 我的代码有点烂图标字体，相信大家都不陌生。包括 font-awesome，iconic 等等，都是很不错的图标字体服务。但是，这些服务基本都是在 web 前端使用。...而要在微信小程序中使用，需要进行简单的移植。今天，知晓程序（微信号 zxcx0101）的这篇文章，就来教你如何在小程序中使用图标字体。工具由于小程序具有体积限制，我们需要对相应文件进行压缩。...这样，才能更方便地将图标字体引入至小程序中。在此，我们推荐一个在线工具：http://fontello.com/。它可以将不需要的图标从字体中排除，这样，就能有效减少字体文件体积大小。...在这里，我们只需要 fontello.ttf 的 Base 64 编码文本，以及 fontello.css 的部分图标字体代码。转码转成 Base 64 很简单，只需要一行指令就可以了。 ?...然后，我们将这些代码添加到一个新的 WXSS 文件，并在新建的 WXSS 文件开头，编写字体的引用： ? 再来一个字体样式的 CSS 类： ? 使用经过上边的处理，小程序就能正常使用这套图标了。

4840 0

UI & UX 小提示合集 -- 第一集

通过一个细边框让你的设计元素看起来更清晰，醒目通过重叠使用阴影或者一个非常细的边框（边框颜色应该只比你的阴影深一点点）可以让些设计元素看起来更清晰，更聚焦。...稍微降低一些字间距能够让标题看起来更平衡，易读，也能界面整体看起来更舒服，自然。 3. 确保你使用的所有图标的风格一致如果界面上出现了图标，就要确保风格完全一致：样式，线种，轮廓，阴影。...无论你对它的使用非常大方或是更谨慎，重点是使用合理，就很好。些许的空白就可以让你的设计看起来有呼吸的空间，界面更精致。这个绝对是快速优化界面的不二法门。 6. 界面上正文内容很多吗？...我其实建议你根本就不要使用那种只有一种字重或样式的字体。当然也有例外，某些项目会要求使用那种只有一种样式的，看起来更复杂的字体，但是对于绝大多数项目，更多的字体选择肯定是更好的。...通过对颜色，对比度，尺寸和标签的使用，来让CTA尽可能突出。设计的时候，情况允许的话，可以尝试使用文本的方式帮助用户理解你的设计，不要总是仅依赖图标。

4132 0

UI&UX17个小技巧合集

通过一个细边框让你的设计元素看起来更清晰，醒目通过重叠使用阴影或者一个非常细的边框（边框颜色应该只比你的阴影深一点点）可以让些设计元素看起来更清晰，更聚焦。...稍微降低一些字间距能够让标题看起来更平衡，易读，也能界面整体看起来更舒服，自然。 3. 确保你使用的所有图标的风格一致如果界面上出现了图标，就要确保风格完全一致：样式，线种，轮廓，阴影。...无论你对它的使用非常大方或是更谨慎，重点是使用合理，就很好。些许的空白就可以让你的设计看起来有呼吸的空间，界面更精致。这个绝对是快速优化界面的不二法门。 6. 界面上正文内容很多吗？...我其实建议你根本就不要使用那种只有一种字重或样式的字体。当然也有例外，某些项目会要求使用那种只有一种样式的，看起来更复杂的字体，但是对于绝大多数项目，更多的字体选择肯定是更好的。...通过对颜色，对比度，尺寸和标签的使用，来让CTA尽可能突出。设计的时候，情况允许的话，可以尝试使用文本的方式帮助用户理解你的设计，不要总是仅依赖图标。

4554 0

UI&UX17个小技巧合集

通过一个细边框让你的设计元素看起来更清晰，醒目通过重叠使用阴影或者一个非常细的边框（边框颜色应该只比你的阴影深一点点）可以让些设计元素看起来更清晰，更聚焦。...稍微降低一些字间距能够让标题看起来更平衡，易读，也能界面整体看起来更舒服，自然。 3. 确保你使用的所有图标的风格一致如果界面上出现了图标，就要确保风格完全一致：样式，线种，轮廓，阴影。...界面中只用一种字体完全可行 -- 忽略酸民的偏见设计中只用一个字体绝对是可以的，并且这么做还可以帮助你达到更一致，更干净的设计效果。忽略掉“必须使用至少2种字体”那类声音。...无论你对它的使用非常大方或是更谨慎，重点是使用合理，就很好。些许的空白就可以让你的设计看起来有呼吸的空间，界面更精致。这个绝对是快速优化界面的不二法门。 6. 界面上正文内容很多吗？...我其实建议你根本就不要使用那种只有一种字重或样式的字体。当然也有例外，某些项目会要求使用那种只有一种样式的，看起来更复杂的字体，但是对于绝大多数项目，更多的字体选择肯定是更好的。

2673 0

iconfont矢量图标旋转晃动

标签：css3 前端 iconfont旋转 iconfont字体图标旋转动画晃动问题描述：项目中使用了iconfont字体图标做旋转动画，就是类似loading加载之类的动效，发现转动起来会出现晃动问题...-- css样式如下(引入的stylesheet.css是从iconfont下载下来的矢量图标库样式文件) --> <link rel="stylesheet" href="stylesheet.<em>css</em>...(PS:页面中<em>使用</em>的<em>图标</em>是将svg图像传到iconfont网站处理以后，然后导出为<em>字体</em>矢量<em>图标</em>引用到页面中。)...是不是我<em>使用</em>的这个svg图像有问题，导致了它转换成<em>字体</em>矢量<em>图标</em>以后出现了这样的情况？...将<em>使用</em>的这个<em>图标</em>的SVG图像导入这个网站生成了一遍，把从这个网站下载下来的<em>字体</em>样式加载到我这里<em>使用</em>。引入<em>字体</em>样式进来以后，查看矢量<em>图标</em>元素大小。

4.9K1 0

计算机科学里最大的难题：居中显示

在这方面，Vincent De Oliveira 曾写过一篇经典的文章“深入理解 CSS：字体参数、行高和垂直对齐”。下面是一些实际的例子。...）：没什么简单的办法，只能对照规范一点点来。...：感谢 @bee 提供图片有时人们会创造性地实现完美对齐：但总体上，这是个让人绝望的游戏：问题在于，CSS 也不能提供什么帮助。...我们能做些什么：图标字体不要再使用字体图标。使用普通的图片格式。为了帮你做出决策，我画了下面这张图：看看苹果公司怎么费力地将复选标记放入矩形内，以及将矩形放到文本标签旁：然而他们还是失败了！...没有什么比对齐两个矩形更容易的了。没有什么比尝试对齐被任意数量空白包围的文本更困难的了。这是一场我们赢不了的游戏。我们能做些什么：视觉补偿作为开发人员，我们只能通过数学的方法实现矩形的完美对齐。

881 0

计算机科学里最大的难题：居中显示

在这方面，Vincent De Oliveira 曾写过一篇经典的文章“深入理解 CSS：字体参数、行高和垂直对齐”。下面是一些实际的例子。...）：没什么简单的办法，只能对照规范一点点来。...：感谢 @bee 提供图片有时人们会创造性地实现完美对齐：但总体上，这是个让人绝望的游戏：问题在于，CSS 也不能提供什么帮助。...我们能做些什么：图标字体不要再使用字体图标。使用普通的图片格式。为了帮你做出决策，我画了下面这张图：看看苹果公司怎么费力地将复选标记放入矩形内，以及将矩形放到文本标签旁：然而他们还是失败了！...没有什么比对齐两个矩形更容易的了。没有什么比尝试对齐被任意数量空白包围的文本更困难的了。这是一场我们赢不了的游戏。

761 0

创建华丽 UI 的 7条规则第二部分 (2019年更新)

为了让我们的眼睛看起来更自然，图像的底部稍微暗一点，就像我们所见过的其他事物一样。更高级的做法，就是结合模糊化，这样的结合就是底部模糊化了。 ?...删除线 -- 90年代的CSS用法了根据我的个人经验，当我发现一个我似乎无法找到合适的文本样式时，并不是因为我忘了尝试使用边距或更暗的颜色 - 而是因为最好的解决办法是同时设置几组“相矛盾的（competing...字体小，对比度低，并且字体较细。以下是非常重要的内容。这个页的标题是仅有的用上了所有 up-pop 方法的文本。对于所有别的东西，你需要 up-pop 并且 down-pop。...完美设计的 Blu Homes 网站有一些大标题，但是需要强调的单词都是小写的——过多的强调看起来会让人看不到重点。 ?...作者还没有把它打包成图标字体，但是有人在 Github 上放了一个字体版本，可以很好地跟踪原始设置（如果你只使用了套装中的10或20个图标，没有必要加载整个包）。

1.1K3 0

图标字体应用实践

详见css-sprite 然而，使用雪碧图存在不可避免的缺点雪碧图的缺点高清屏会失真在2x的设备像素比的屏幕上例如mac，如果要达到和文字一样的清晰度，图片的宽度需要实际显示大小的两倍，否则看起来会比较模糊...但是这种方法吃力不讨好，只适用比较简单的情况，复杂的图标最后合并的效果很难做到和原先的一模一样。有一个比较智能的办法，就是使用PS的合并形状组件的功能： ?...然后，把所有使用图标字体的span/a标签都加一个.icon的类，.icon类设置font-family为font-face定义的字体名通过font face引入图标字体 CSS @font-face...借助jsp嵌套svg 这样做的缺点是浏览器没办法缓存，同时会阻碍页面的加载。优点是由于是内联的，可以直接用CSS控制svg的样式 2....svg的路径作为src属性，这种方法的缺点是没办法用CSS控制样式。

2.2K2 0

每个前端开发者都应知道的25个实用网站

然后，该网站会显示调色板在使用中的示例。 Gradients 如果你选对了颜色搭配，渐变效果可以让你的网站看起来很棒，但如果搭配不当，它们会让你的网站显得不专业。...这使得在你想要确保颜色调色板保持易于访问且保持高对比度比率时更容易规划。 CSS 生成器接下来，当你只是想要得到正确的阴影值或正确的动画关键帧时，重写相同的CSS可能会很繁琐。...Dribbble的不同之处在于，这些设计大多是模拟图，通常更注重美观。图形接下来，寻找免费使用的图形和图标可能会很困难，无论是用来解释产品的插图，还是提供更好用户体验的图标。...如果你更喜欢简单地复制和粘贴一些代码来加载你的图标，Font Awesome 是一个值得一看的网站。...生成字体搭配在任何网站上，你通常也会想要使用大约两种字体，一种通常用于标题，另一种用于正文文本。Fontjoy 是一个可以帮助你生成字体配对并让你可视化它们一起使用时的外观的网站。

3044 0

前端不止：请告诉我，你要什么样的图标

有一个英语成语叫做一画胜千言（A picture is worth a thousand words），不知道大家有没有听过？...3.IconFont IconFont是目前最为流行的图标解决方案，顾名思义，它就是字体文件，你可以用任何一个字体编辑工具打开它，如果你打开某一个查看，就会发现它就是一些路径，这些路径可以用AI，PS...IconFont的优点在于能够用CSS控制样式，无限缩放而不失真，支持IE7+，兼顾屏幕阅读器，不过缺点是不能支持彩色图标（拥有多种颜色的图标）。...选择合适的导出选项上图展示的选项是推荐的生成适合Web使用的SVG。如果你不想使用Web字体，可以选择把文本转换成轮廓。...不过，关于这个角色的定义众说纷纭，我们就不在这里细聊了。

1.6K7 0

非样式布局

看浏览器所在主机中 有没有fallback指定的这些字体中的一个。 fallback并不是针对整个body元素的，而是对每个字符都会采用fallback机制。...而字体族是不能加引号的。把更特殊的字体写在前面，稍微通用一些的字体往后放。...如何让一个很长的句子不换行？...Hack 用来处理特定浏览器的办法，来兼容不同浏览器，在一部分浏览器上生效的css。...图标字体：把图标做成文字，给他定义成特别的字体，在需要使用的地方引入该字体。 * base64的使用把图片变成文本的一种方式，然后把base64字符串内嵌到css中进行使用。

1.8K2 0

Refactoring UI

# 语言使用不那么个人化的语气可能会让人感觉更正式或更专业使用更友好、更随意的语言则会让人感觉网站更友好 # 决定你真正想要什么很多时候，你可能只是凭直觉来判断自己的个性。...让文字更接近背景色才真正有助于创建层次，而不是让文字变成浅灰色使用白色文字并降低不透明度，确实降低了对比度，但往往会导致文本看起来暗淡、失色，有时甚至是残缺的在图像或图案上使用这种方法意味着背景会透过文字显示出来...# 平衡重量和对比度与普通文字相比，粗体文字让人感觉突出的原因是粗体文字覆盖了更大的表面积--在相同的空间内，文字使用的像素要多于背景使用的像素 # 利用对比度补偿重量就像粗体文字一样，图标（尤其是实心图标...，使其颜色更柔和这种方法适用于任何需要平衡不同重量元素的地方，降低对比度就像一种平衡，即使重量没有改变，也会让较重的元素感觉更轻 # 利用重量补偿对比度当使用柔和的颜色会使 1px 的细边框等过于微妙...就增加一点边距或填充，直到看起来好一些要想让某样东西真正看起来很棒，通常需要更多的留白空间更好的办法是，先给某样东西过多的空间，然后将其移除，直到你对结果满意为止 # 密集的用户界面有其存在价值

5573 0

16个小的UI设计规则却能产生巨大的影响

使用空间将相关元素分组将信息分解为相关元素的小组可以帮助结构化和组织界面，这让人们更快、更容易地理解和记忆。...在我们的例子中，内容之间缺乏空间使得设计看起来混乱且难以理解。增加间距有助于清晰地将内容分组，使其更有组织性，更容易理解。...在我们的例子中，图标容器的视觉样式与“立即预订”按钮相似。这使它们看起来像是可以交互的，尽管它们并非如此。移除图标的蓝色和按钮样式有助于避免它们被误认为是可以交互的元素。...细的字体权重使其更难阅读。使用更深的灰色有助于使文本更易于访问。我们稍后将对文本进行进一步的更新，以提高其质量。 9.不要仅依赖颜色作为指示器有许多不同类型的色盲，主要影响男性。...如果你决定使用非常细或非常粗的字重，请将其保留给标题和较大的文本，因为在较小的尺寸上阅读可能会困难。在我们的例子中，位置文本使用了较轻的字重。

3092 0

让你的网站用上炫酷的中文字体

CSS3 引入的 @font-face 这一属性可以很好的解决这个问题，可以帮助我们非常灵活的使用一些特殊的字体，即使用户电脑里面没有安装这个字体，网页也可以显示。...EOT 字体是 IE 浏览器的首选格式，其他浏览器都不支持；其他浏览器更钟爱常见的 TTF、SVG、WOFF。...现在思路有了，那么有没有现成的工具呢？ 03 裁剪工具 ? 还真有。...04 font-spider-plus 使用方法根据官方文档，要想使用 font-spider-plus，首先要在 CSS 文件中通过 @font-face 引入全量大小的特殊字体。具体怎么做呢？..." href="{{ "css/fonts-zh.css" | absURL }}" /> 最后让网站的 body 使用该中文字体，具体的做法是修改 body 的 css，以 hugo 的 beatifulhugo

2.5K2 0

每个前端都需要知道这些面向未来的CSS技术

指容容器滚动行为，让滚动效果更丝滑 overscroll-behavior优化滚动边界，特别是可以帮助我们滚动的穿透自定义滚动条的外观默认的window外观和mac外观 windows mac...这例子看起来自定义属性也没什么了不起的嘛，但这是一个硬编码的情况。你有没有意识到，--theme-color 的属性值是可以用在任意选择器和属性上的呢？这可就厉害了。...如果使用Sass或类似的CSS预处理程序，则可能更喜欢嵌套。注意：浏览器还支持非标准的 :-webkit-any() 和 :-moz-any() 伪类，它们与 :is() 相似，但限制更多。...，或者说更易于控制图标颜色和大小，开始在使用Icon Font来制作Web图标当然，字体图标是解决了不少问题，但每次针对不同的图标的使用，需要自定义字体，也要加载相应的字体文件，相应的也带了一定的问题...，比如说跨域问题，字体加载问题随着SVG的支持力度越来越强，大家开始在思考SVG，使用SVG来制作图标。

8854 0

个人样式整理表

， 31 1月 2021 作者 847954981@qq.com 说明补充个人样式整理表 font-size 标签内字体大小 color 标签内字体颜色,可以用英文字母形式如blue，或者使用十六进制颜色表示...，即#开头的颜色表示，也可以使用RGB标准格式即如rgb(253,217,106)表示，或者如RGBA在RGB的基础上再加上透明度rgba(253,217,106,0.6)最后一位即透明度 font-weight...标签内字体的粗细，可以是具体是数字如：200；或者如normal（正常粗细），lighter（细），bold（粗），bolder（更粗） text-align 标签内文字对齐方式，center（中心对齐...，字体能否被应用取决于使用者电脑有没有安装这个字体如果值中用”,”连接了多种字体，则会依次加载，检验有没有安装这种字体，直到检验到安装的字体，或者检验失败而使用默认字体注：HTML中注释方法为：...-- 注释内容 --> CSS中注释方法(包括内部样式和外部样式)为： /* 注释内容 */

4012 0

这些CSS的新特性还是有必要进来瞧瞧的

指容容器滚动行为，让滚动效果更丝滑 overscroll-behavior优化滚动边界，特别是可以帮助我们滚动的穿透自定义滚动条的外观默认的window外观和mac外观 windows mac...这例子看起来自定义属性也没什么了不起的嘛，但这是一个硬编码的情况。你有没有意识到，--theme-color 的属性值是可以用在任意选择器和属性上的呢？这可就厉害了。...如果使用Sass或类似的CSS预处理程序，则可能更喜欢嵌套。注意：浏览器还支持非标准的 :-webkit-any() 和 :-moz-any() 伪类，它们与 :is() 相似，但限制更多。...，或者说更易于控制图标颜色和大小，开始在使用Icon Font来制作Web图标当然，字体图标是解决了不少问题，但每次针对不同的图标的使用，需要自定义字体，也要加载相应的字体文件，相应的也带了一定的问题...，比如说跨域问题，字体加载问题随着SVG的支持力度越来越强，大家开始在思考SVG，使用SVG来制作图标。

7922 0

每个前端都需要知道这些面向未来的CSS技术

指容容器滚动行为，让滚动效果更丝滑 overscroll-behavior优化滚动边界，特别是可以帮助我们滚动的穿透自定义滚动条的外观默认的window外观和mac外观 windows mac...这例子看起来自定义属性也没什么了不起的嘛，但这是一个硬编码的情况。你有没有意识到，--theme-color 的属性值是可以用在任意选择器和属性上的呢？这可就厉害了。...如果使用Sass或类似的CSS预处理程序，则可能更喜欢嵌套。注意：浏览器还支持非标准的 :-webkit-any() 和 :-moz-any() 伪类，它们与 :is() 相似，但限制更多。...，或者说更易于控制图标颜色和大小，开始在使用Icon Font来制作Web图标当然，字体图标是解决了不少问题，但每次针对不同的图标的使用，需要自定义字体，也要加载相应的字体文件，相应的也带了一定的问题...，比如说跨域问题，字体加载问题随着SVG的支持力度越来越强，大家开始在思考SVG，使用SVG来制作图标。

7513 0

每个前端都需要知道这些面向未来的CSS技术

，让滚动效果更丝滑 overscroll-behavior优化滚动边界，特别是可以帮助我们滚动的穿透自定义滚动条的外观默认的window外观和mac外观 windows [image.png] mac...这例子看起来自定义属性也没什么了不起的嘛，但这是一个硬编码的情况。你有没有意识到，--theme-color 的属性值是可以用在任意选择器和属性上的呢？这可就厉害了。...如果使用Sass或类似的CSS预处理程序，则可能更喜欢嵌套。 **注意**：浏览器还支持非标准的 :-webkit-any() 和 :-moz-any() 伪类，它们与 :is() 相似，但限制更多。...，面对多种设备终端，或者说更易于控制图标颜色和大小，开始在使用**Icon Font**来制作Web图标当然，字体图标是解决了不少问题，但每次针对不同的图标的使用，需要自定义字体，也要加载相应的字体文件...，相应的也带了一定的问题，比如说跨域问题，字体加载问题随着SVG的支持力度越来越强，大家开始在思考SVG，使用SVG来制作图标。

6303 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭