如果你有这些大的“倾斜”字体(不确定术语)，你的不透明度小于 1，并且你使用 text-align:right，文本的末尾将被截断。我还发现，在 Safari 的 OSX 版本中，即使不透明度为 1，结尾也不会呈现。在其他任何地方，似乎只有当不透明度 < 1 时才会出现这种情况。这似乎只发生在将文本对齐到权利。
我在 jsfiddle 中重现了这个问题:
代码:
<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>
最佳答案
我不知道您是在寻找解决方法还是解释，这确实很奇怪并且没有答案，但是可以使用解决方法:)。您可以向“框 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>
希望对您有所帮助
干杯
关于html - 倾斜的字体被 text-align :right 截断，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/27177900/