Question

如果你有这些大的＆＃34;倾斜的＆＃34;字体（在术语上不确定），您的不透明度小于1，并且您正在使用text-align：对，文本的末尾将被截断。我还发现在Safari的OSX版本中，即使不透明度为1，结尾也不会渲染。除了不透明度之外，其他任何地方似乎都是这样。 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>

Answer 1

我不知道您是在寻找解决方法还是解释，这确实很奇怪而且没有答案，但可以找到解决方法:)。你可以在“方框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>

希望这有帮助

欢呼声

倾斜的字体被文本对齐切断：对

1 个答案: