html - 版权、注册商标、商标和服务商标实体定位

Question

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

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

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

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

这是 fiddle :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，尤其是定位属性，如 position: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>

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