使用 CSS 对 live 类型降低 Arc 效果答案

【问题标题】：Lower Arc effect on live type with CSS使用 CSS 对 live 类型降低 Arc 效果
【发布时间】：2012-10-09 00:05:54
【问题描述】：

我想知道 CSS 是否可以实现这种效果 (http://igdaloff.com/mission.jpg)。我知道你可以弧整个字母，但好奇是否有可能保持单词的顶部平坦而只弧形底部。 Illustrator/Photoshop 中的效果称为上弧或下弧。

http://igdaloff.com/mission.jpg

非常感谢任何指导。

【问题讨论】：

@BertrandMarron，太糟糕了。哈。（我老板的设计，不是我的。显然是印刷品而不是网页设计师）

标签： css text typography warp

【解决方案1】：

不是真的，我唯一能想到的就是像下面的例子那样在每个字母上放一个类，但这不是最好的，但它工作了一半。目前没有办法只使用 css 来弯曲文本，它是严格的矩形，所以你真的只能围绕文本的矩形属性工作。

<html>
<head>
<style type="text/css">
body {background-color:yellow;}
p {color:blue;}
.level1 {margin-top:0px !important; position:absolute;}
.level2 {margin-top:-2px; margin-left:10px; position:absolute;}
.level3 {margin-top:-4px; margin-left:20px; position:absolute;}
.level4 {margin-top:-3px; margin-left:30px; position:absolute;}
.level5 {margin-top:-2px; margin-left:40px; position:absolute;}
.level6 {margin-top:0px; margin-left:50px; position:absolute;}
</style>
</head>
<body>
<p><b class="level1">T</b><b class="level2">h</b><b class="level3">e</b> 
<b class="level4">e</b><b class="level5">n</b><b class="level6">d.</b></p>
 </body>
 </html>

jsFiddle Version

【讨论】：

感谢您试一试@Self_Taught_Programmer。不是我想要的效果。目前看来这不可行。