著作权、注册商标、商标和服务商标实体定位

Question

有人知道为什么©和®不能像™和℠那样在不影响前导(即line-height)的情况下很好地上标吗？

我尝试过用<sup>甚至<small>包装©和®，但我无法让它按我需要的方式工作。有时更改字体大小会有所帮助，但并不总是如此。

这适用于我们在<h1>、副标题和正文副本中使用的HTML电子邮件。

当我将它包装在<sup>中并应用CSS时，它就变得很难控制。从一个电子邮件客户端到另一个电子邮件客户端，以及从一个设备到另一个设备，它的行为都不同(这是为了响应电子邮件)。

这就是问题所在：http://jsfiddle.net/cy03eov1/5/

当然，position:和em在电子邮件中也不能很好地工作，margin的支持也参差不齐。

​

body {
    font-size: 26px;
    line-height: 1em;
    color: #ccc;
    font-family: Helvetica, sans-serif;
    background: lightslategray;
}
table {
    width: 80%;
    margin: 30px auto 0;
    background: #fff;
    padding: 5px 20px;
}
.copyright {
    font-size:70%;
    
}

<table cellspacing="0" border="0">
    <tr>
        <td>
            <p>Do you know that horrible fear when you’ve broken something on a client project and you have no idea how to fix it? I do… Sometimes I’ll have been<span class="copyright" style="color:red;"><sup>&copy;</sup></span> wading through templates on a site, getting it all up to scratch, then suddenly I’m faced with a page of doom—a whole<span style="color:red; font-size: 70%; vertical-align:text-top;">&reg;</span> page of garbled semi-English that sort of resembles an error<span style="color:red;">&trade;</span> message, but nothing I’ve ever seen before.</p>
            <p>As a freelancer, I’ve always been proud to have the time to dedicate to learning<span style="color:red;">&#8480;</span>. Keeping up with the industry, and being able to level up my skills on each new project, is very important to me.</p>

            <p>But sometimes I struggled when I pushed myself that little bit too far. A few times I’ve had to request a lifeline from kind people on Twitter to pull me out of a hole. And then I feel a bit daft, having to admit my inadequacies on a social network in order to save myself from a worse situation.</p>
        </td>
    </tr>
</table>

​

Answer 1

Unicode没有这些字符的上标或下标字形，因此您必须单独修改字体样式

http://jsfiddle.net/cy03eov1/8/embedded/result/

我刚添加了

p span { }

并将字体变小并将其向上移动了8个像素。

我注意到你在一封电子邮件中提到了你这样做。虽然上面提到的解决方案可以很好地用于网页，但最好不要在电子邮件中使用CSS，特别是位置属性:relative；

您可以通过(see demo)对表实现同样的效果

<table border="0" cellpadding="0" cellspacing="0">
    <tr>
        <td height="20" style="font-size:18px;">Line of text followed by a </td>
        <td height="20">
            <table border="0" cellpadding="0" cellspacing="0">
                <tr>
                    <td height="10" style="font-size:9px;">&copy;</td>
                </tr>
                <tr>
                    <td height="10"><table border="0" cellpadding="0" cellspacing="0"><tr><td><table border="0" cellpadding="0" cellspacing="0"><tr><td></td></tr></table></td></tr></table></td><!-- this is a standard table spacer alternative to email shim -->
                </tr>
            </table>
        </td>
        <td height="20" style="font-size:18px;">character.</td>
    </tr>
</table>

需要更多的工作，但适用于所有电子邮件客户端。