倾斜的字体被 text-align:right 截断答案

【问题标题】：Slanted fonts get cut off with text-align:right倾斜的字体被 text-align:right 截断
【发布时间】：2014-11-28 05:18:37
【问题描述】：

如果你有这些大的“倾斜”字体（不确定术语），你的不透明度小于 1，并且你正在使用 text-align:right，文本的结尾会被截断。我还发现，在 OSX 版本的 Safari 中，即使不透明度为 1，结尾也不会呈现。在其他任何地方，似乎只有当不透明度

我已经在 jsfiddle 中重现了这个问题：

http://jsfiddle.net/qcr62eoa/

代码：

<head>
    <title>Test</title>
    <link href='http://fonts.googleapis.com/css?family=Playball' rel='stylesheet' type='text/css'>
    <style>
        .box {
            background-color: lightblue;
            width: 500px;
            font-family: 'Playball', cursive;
            text-align: right;
            padding-right:30px;
        }
        .box h1 {
            opacity: 0.5;
            font-size:48px;
            font-weight:400;
        }
    </style>
</head>
<body>
    <div class="box">
        <h1>Hello world</h1>
    </div>
</body>

【问题讨论】：

字体有问题
我在使用这种类型的多种字体时遇到了同样的问题，但我会尝试更多，看看是否属实
代码和小提琴没有说明问题，因为它们显然有治疗方法，正确的填充。
哦，他们确实演示了它——在 Chrome 和 IE 中，而不是在 Firefox 中。
@JukkaK.Korpela：不，填充无关紧要，只是让它更容易看到。 i.imgur.com/FCJxFOA.png - 两种不同不透明度的屏幕截图。最后一个字母的尾部被剪掉。编辑：哦，是的，我想应该提到浏览器：P 对不起

标签： html css fonts text-align

【解决方案1】：

我不知道您是在寻找解决方法还是解释，这确实很奇怪并且没有答案，但是可以使用解决方法:)。您可以在“box h1”中添加一些填充。

我测试了它并且它有效

<head>
    <title>Test</title>
    <link href='http://fonts.googleapis.com/css?family=Playball' rel='stylesheet' type='text/css'>
    <style>
        .box {
            background-color: lightblue;
            width: 500px;
            font-family: 'Playball', cursive;
            text-align: right;
            padding-right:30px;
        }
        .box h1 {
            opacity: 0.5;
            padding-right:10px;
            font-size:48px;
            font-weight:400;
        }
    </style>
</head>
<body>
    <div class="box">
        <h1>Hello world</h1>
    </div>
</body>

希望这有帮助

干杯

【讨论】：

谢谢，成功了。肯定有解决方法（我正在考虑更改颜色的 alpha 值）。仍然对为什么会发生这种情况感兴趣。
我能得到的唯一解释是，如果 opacity 设置为 1，浏览器会忽略它并在没有它的情况下运行。如果您不使用不透明度，它还会显示全文。尝试选择斜体文本，然后您会注意到最后一个字符的最后一部分的选择也会被剪切。所以我的猜测是“不透明度”只显示可选择的文本。
如果您再次添加不透明度并尝试选择文本，您会注意到它会准确选择文本被切断的位置。希望这部分解释了它:)
在上面的主题上再添加一件事。如果您不想使用填充解决方法，则可以使用另一种解决方法。在文本后添加一个空格，使其看起来像这样：<h1>Hello world &nbsp</h1>。