如何仅使用 CSS 摆脱重音符号

Posted 2023-02-24

【中文标题】如何仅使用 CSS 摆脱重音符号

【英文标题】：How to get rid of accents just with CSS

【发布时间】：2019-02-05 05:25:43

【问题描述】：

在不使用 JS 的情况下，我想使用 CSS 删除重音符号，以便 html 在语义上继续正确，同时 在视觉上 实现不带重音符号的大写。

例子：

h1 
  text-transform: uppercase;
  /*sth here*/

<h1>Fácil</h1>

谢谢！

【问题讨论】：

您的意思是要将Fácil 转换为Facil 对吧？

你不能，只使用css，你可以做大写，小写和大写....看这个：w3schools.com/cs-s-ref/pr_text_text-transform.asp

【参考方案1】：

您可以调整line-height 并使用overflow:hidden，但请注意，当使用不同的font-family 时，您可能需要另一个值：

h1 
  text-transform: uppercase;
  line-height: 0.75em;
  overflow: hidden;

<h1>Fácil é â ä</h1>
<h1 style="font-size:25px">Fácil é â ä</h1>
<h1 style="font-size:18px">Fácil é â ä</h1>

与另一个font-family：

h1 
  font-family:arial;
  text-transform: uppercase;
  line-height: 0.87em;
  overflow: hidden;

<h1>Fácil é â ä</h1>
<h1 style="font-size:25px">Fácil é â ä</h1>
<h1 style="font-size:18px">Fácil é â ä</h1>

【讨论】：

不理解这里的downvote，这可能是CSS中唯一的方法

@RaymondNijland 一些用户不喜欢 hacks，即使这是 OP 要求的，但它们是免费的 ;)