2

我正在尝试构建一个小系统，突出显示与常规字符不同颜色的字符组合。举个例子：

* { font-size: 72px }
b { font-weight: normal; color: red }
Te&#x301;st A&#x334; B&#x353; <br/>
Te<b>&#x301;</b>st A<b>&#x334;</b> B<b>&#x353;</b>

我希望三个组合字符（重音重音、波浪号覆盖和下面的 x）以红色突出显示，但如果在原始文本中保持精确的位置。问题是，当我在 HTML 元素中包装组合字符时，它不再“附加”到基本字符，而是与文本的其余部分内联。

有没有办法用 HTML / CSS 来完成这个？

注意：我在这里和这里查看了答案，但它们似乎都只是“几何地”解决问题——即它们突出显示某个区域内的角色部分。这个问题专门关于突出组合字符的“印刷”方面。

4

4 回答 4

1

我不确定我是否完全理解了您的问题，但是就这样吧。如果您现在只需要重音返回正确的位置，现在它是单独设置的，您可以应用类似于：

* { font-size: 72px }
b { font-weight: normal; color: red; position: absolute; top: 52%;}
Te&#x0301;st <br/>
Te<b>&#x0301;</b>st

于 2014-10-16T15:43:24.950 回答
1

好的，我想我找到了部分解决方案，但这有点棘手。基本上，我必须通过组合字符来渲染整个字符，然后在没有任何组合字符的情况下用另一个字符隐藏它：

* { font-size: 72px }
b { font-weight: normal; color: red; width: 0px; overflow: visible; display: inline-block; }
i { font-style: normal; color: black; }
Te&#x0301;st <br/>
T<b>e&#x0301;</b><i>e</i>st

不幸的是，这会在消除锯齿时为基本角色提供非常轻微的红色轮廓。

在此处输入图像描述

它不适用于某些覆盖字符。在此示例中，红色条应为黑色d：

* { font-size: 72px }
b { font-weight: normal; color: red; width: 0px; overflow: visible; display: inline-block; }
i { font-style: normal; color: black; }
d&#x336; <br/>
<b>d&#x336;</b><i>d</i>

于 2014-10-16T15:54:47.880 回答
1

差不多一年后，我重新审视了这个问题，并且我找到了一个使用 SVG 的更令人满意（虽然更冗长）的解决方案。基本上，这与我之前基于 HTML/CSS 的版本类似，但 SVG 使您能够对底层基本字符的抗锯齿边缘进行剪辑/屏蔽。

剩下的唯一真正问题是如何处理覆盖字符（组合字符直接呈现在底层字符之上）。在这种情况下，您要么需要在覆盖层顶部呈现基本字符（在我的用例中不推荐），要么将覆盖层呈现在不一定完全匹配基本字符宽度的占位符空白字符上。这是一个演示：

svg text {
  x: 50px;
  y: 50px;
  alignment-baseline: middle;
  text-anchor: middle;
  font-size: 55px;
}
svg .backdrop {
  x: 1px;
  y: 1px;
  rx: 15px;
  ry: 15px;
  width: 98px;
  height: 98px;
  fill: url(#grad);
}
svg .cc-above { fill: #F00; }
svg .cc-below { fill: #00F; }
svg .cc-overlay { fill: #0FF; }
svg .cc-base { fill: #000; }
svg .cc-mask { stroke: #000; stroke-width: 3px; }
.sample { float: left; }
.caption { display: block; text-align: center; }
<div class="sample">
  <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="100px" height="100px" viewBox="0 0 100 100">
    <defs>
      <text id="base" x="50" y="50">e</text>
      <linearGradient id="grad" x1="0%" y1="0%" x2="100%" y2="100%">
        <stop offset="0%" style="stop-color:#DDD;stop-opacity:1" />
        <stop offset="100%" style="stop-color:#888;stop-opacity:1" />
      </linearGradient>
    </defs>
    <rect class="backdrop" />
    <mask id="mask1">
      <rect x="0" y="0" width="100%" height="100%" fill="#fff" />
      <use xlink:href="#base" class="cc-mask" />
    </mask>
    <text class="cc-above" x="50%" y="50%" mask="url(#mask1)">e&#x0300;</text>
    <use xlink:href="#base" class="cc-base" />
  </svg>
  <div class="caption">Above</div>
</div>

<div class="sample">
  <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="100px" height="100px" viewBox="0 0 100 100">
    <defs>
      <text id="base" x="50" y="50">e</text>
      <linearGradient id="grad" x1="0%" y1="0%" x2="100%" y2="100%">
        <stop offset="0%" style="stop-color:#DDD;stop-opacity:1" />
        <stop offset="100%" style="stop-color:#888;stop-opacity:1" />
      </linearGradient>
    </defs>
    <rect class="backdrop" />
    <mask id="mask1">
      <rect x="0" y="0" width="100%" height="100%" fill="#fff" />
      <use xlink:href="#base" class="cc-mask" />
    </mask>
    <text class="cc-below" x="50%" y="50%" mask="url(#mask1)">e&#x031F;</text>
    <use xlink:href="#base" class="cc-base" />
  </svg>
  <div class="caption">Below</div>
</div>

<div class="sample">
  <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="100px" height="100px" viewBox="0 0 100 100">
    <defs>
      <text id="base" x="50" y="50">e</text>
      <linearGradient id="grad" x1="0%" y1="0%" x2="100%" y2="100%">
        <stop offset="0%" style="stop-color:#DDD;stop-opacity:1" />
        <stop offset="100%" style="stop-color:#888;stop-opacity:1" />
      </linearGradient>
    </defs>
    <rect class="backdrop" />
    <mask id="mask1">
      <rect x="0" y="0" width="100%" height="100%" fill="#fff" />
      <use xlink:href="#base" class="cc-mask" />
    </mask>
    <use xlink:href="#base" class="cc-base" />
    <text class="cc-overlay" x="50%" y="50%">&#x2002;&#x0334;</text>
  </svg>
  <div class="caption">Overlay</div>
</div>

<div class="sample">
  <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="100px" height="100px" viewBox="0 0 100 100">
    <defs>
      <text id="base" x="50" y="50">e</text>
      <linearGradient id="grad" x1="0%" y1="0%" x2="100%" y2="100%">
        <stop offset="0%" style="stop-color:#DDD;stop-opacity:1" />
        <stop offset="100%" style="stop-color:#888;stop-opacity:1" />
      </linearGradient>
    </defs>
    <rect class="backdrop" />
    <mask id="mask1">
      <rect x="0" y="0" width="100%" height="100%" fill="#fff" />
      <use xlink:href="#base" class="cc-mask" />
    </mask>
    <text class="cc-above" x="50%" y="50%" mask="url(#mask1)">e&#x0300;</text>
    <text class="cc-below" x="50%" y="50%" mask="url(#mask1)">e&#x031F;</text>
    <use xlink:href="#base" class="cc-base" />
    <text class="cc-overlay" x="50%" y="50%">&#x2002;&#x0334;</text>
  </svg>
  <div class="caption">All</div>
</div>

我对 SVG 没有太多经验，有经验的人可能会找到进一步改进此解决方案的方法。

于 2015-10-01T04:46:17.077 回答
0

这是一个技巧，但是如何text-indent:-1ex将重音向后移动 1 个字符宽度。 http://jsfiddle.net/1tm1Lrrp/4/

在任何情况下，这些建议都不适用于 i 因为点仍然存在。

于 2014-10-16T15:52:39.590 回答