主页 / 问题 / 750218
Accepted
Alexey Giryayev
Asked:2020-11-27 19:39:15 +0000 UTC2020-11-27 19:39:15 +0000 UTC

更改颜色时更改文本和图标的粗细

  • 772

为了让问题更清楚，我将从一张图片开始：

在此处输入图像描述

放置在浅色背景上的黑色文本（或图标）不改变其颜色看起来很好，因为它应该。但是，如果您想将文本放在深色背景上并将其颜色更改为任何其他颜色（不一定是白色），那么在视觉上它会变得更厚。如果您合并 2 张图像，这一点尤其明显。

我想知道这方面与什么有关？这可以为他解决吗？

添加代码：

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  padding: 0;
}

div:not(.mixed) {
  padding: 30px;
  text-align: center;
  font-size: 1.2em;
}

span,
i {
  font-size: 2em !important;
}

.black {
  background: #eee;
  color: #000;
}

.white {
  background: #333;
  color: #fff;
}

.mixed {
  position: relative;
  margin-top: 10px;
}

.mixed .black {
  background: transparent;
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
}
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<div class="black">small and <span>BIG</span> <i class="fa fa-commenting-o"></i></div>
<div class="white">small and <span>BIG</span> <i class="fa fa-commenting-o"></i></div>

<div class="mixed">
  <div class="black">small and <span>BIG</span> <i class="fa fa-commenting-o"></i></div>
  <div class="white">small and <span>BIG</span> <i class="fa fa-commenting-o"></i></div>
</div>

我通常在这里收集图标。有了 Font-awesome，并不是一切都那么糟糕，但他们在道德上已经变老了。

css

2 个回答

  1. Best Answer

    编译了一个测试用例 https://jsfiddle.net/hdyLz25c/

    所以它不是质量一般的jpeg。确实，观察到增稠，但是 !!! ...

    特意放大了图片（这里是一个符号）很明显符号是一样的（最多半透明像素），心理上出现粗细的效果

    不同背景下的文字对比

    您还可以查看属性font-smooth并使用抗锯齿，但浏览器还不太喜欢这样做。

    https://caniuse.com/#search=font-smooth

    附言

    我从您的示例中放大了图像 - 同样的情况，图像具有 1 合 1 半透明像素精度，但由于心理影响，它们看起来更宽，因为半透明像素似乎增加了宽度

    不同背景下的图像比较

    聚苯乙烯

    特别是在 1 个建议（影子）上，我举了一个例子：https ://jsfiddle.net/hdyLz25c/1/

    而且字体在视觉上变得更细了！！！

    3种显示图像的方式，底部的一种细化文字

    所以方法有效！

    • 2

  2. 你是从错误的概念开始的。只有在较暗的背景上使用较浅的字体时，文本才会显得较粗，否则文本会显得较细。

    此外，对于这种情况，还有一个颜色组合表（通常以圆圈的形式框起来），当颜色必须相反时，就会得到“拉出眼睛”系统。

    http://studyas.com/shag-3-oformlenie-interera/tsvet-v-interere/74-sochetanie-tsvetov-i-tsvetovoj-krug-garmonichnye-tsveta

    至于让字体看起来不厚重，可以试试在字体周围轻微发光的技巧（例如，偏移量为 0.0 的阴影）。

    例如：

    text-shadow 0px 0px 1px rgba(0, 0, 0, 0.25)

    有2个选项：

    1）向外发光（字体会变粗）

    2）向内发光（字体会变薄）

    发光颜色应接近选项 1) 的文本颜色，接近选项 2 的背景颜色。

    没错，您不能为文本创建内部阴影 - 您需要阅读： https ://habrahabr.ru/post/154211/ （阅读“文本阴影中的插图”）

    因此，可以通过使用接近背景的颜色“溶解”其边缘来缩小“粗体”字体

    • 0

相关问题