我一直在研究使用CSS而不是图像在一行文本中反转单个字符，但是每次我使CSS正常工作并在一个浏览器中内联时，该字母通常在其他浏览器中都错开1 / 2px（这是适用于Firedfox 45，Edge和chrome）。
到目前为止，我已经
<style>
@import url(https://fonts.googleapis.com/css?family=Droid+Serif);
* {font-family:"droid serif"}
div {position:relative; float:left; display:inline-block }
div h1 { margin:0; font-size:3em; position:relative; }
div h1.invert { float:left; transform: scale(-1,-1);
/* Also tried
div h1.invert { float:left; transform:rotate(180deg);}
*/
</style>
<div>
<div>
<h1>THI</h1>
</div>
<div>
<h1 class="invert">S</h1>
</div>
</div>
强制提琴.... https：//jsfiddle.net/1q9jbuf8/
这里的问题不是实际的字母，而是字体内的间距。您可以通过使用$('.invert')[0].getClientRects()[0]，然后应用您的转换并再次检查来进行检查。如果有的话，唯一改变的是水平位置。
如果没有在画布上绘制文本，确定带有像素的实际矩形，然后仅旋转该像素，我将无法解决此问题。也许其他人有更好的解决方案，但是唯一合理的解决方案应该是对您可以控制的字体和大小进行单独的修复（例如添加position:relative; top: 1px;）
我玩了一段时间：https：//jsfiddle.net/v06j5hz0/6/
在那里，我简化了倒置模型（顺便说一句：倒置表示rotateX，不旋转），并且显示了实际的矩形大小，位置等。不幸的是，除了知道实际的字体和大小并更新transform-origin要点外，我没有其他解决方案。
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句