Question

我希望网站上的所有“®”都是上标。我可以用CSS做到吗？

Answer 1

AverageAdam的答案可以正常使用，但如果您出于某种原因需要CSS版本，则可以这样做：

.sup { vertical-align: super; }

和

<span class="sup">&reg;</span>

来自here。

Answer 2

将此添加到您的html文件<sup>your mark here</sup>

然后将此添加到您的CSS

sup {
    position: relative;
    font-size: 40%;
    line-height: 0;
    vertical-align: baseline;
    top: -1.2em;
}

您可以使用css中的“top”调整标记的高度，使用“font-size”调整大小。这也适用于您想要的任何TM，SM或符号。它不会影响你的任何间距或排版。

Answer 3

<sup>&reg;</sup>

不幸的是CSS没有办法指定上标。但是，您可以使用跨度和一些标记对其进行模拟。

http://www.webmasterworld.com/forum83/1031.htm

Answer 4

我知道你问过CSS但这个jQuery代码对我有用，希望它可以帮到你

<html>
    <head>
        <script type="text/javascript"
            src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js">
        </script>
        <script type="text/javascript">
            $(document).ready(function() {
                $("body").html(
                    $("body").html().replace("®", "<sup>&reg;</sup>")
                ); 
            });
        </script>
    </head>
    <body>
        Some text here &reg;
    </body>
</html>

Answer 5

使用下面的CSS创建一个不会破坏您的潜在客户的标记。根据需要调整值。字体大小是可选的，我用它来使我的r-balls比注册的商标文本小一点。

sup{
 vertical-align: 75%;
 line-height: 5px;
 font-size:11px;
}

Answer 6

Victor的回答仅适用于我页面上的第一个Reg标记。我发现这段代码可以在整个页面上运行。希望它可以帮助某人：

$("body").html(
   $("body").html().replace(/&reg;/gi, '<sup>&reg;</sup>').replace(/®/gi, '<sup>&reg;</sup>')
);

在此处找到：http://www.cmexsolutions.com/blog/use-jquery-to-superscript-all-register-marks-reg-or-%C2%AE

Answer 7

除了之前的答案，我建议上标是表示的而不是语义的，因此应该使用CSS来完成注册标记的样式。无论是否上标，注册商标仍然是注册商标，并且将被人/计算机识别为注册商标。符号本身可以被认为是语义的，因为它给与之相关的对象赋予了“特殊”的含义，但它的样式完全是表现性的。按照惯例，注册商标通常（但不总是）上标，商标符号也是如此。

Answer 8

上面某些脚本的唯一问题是它们没有处理页面上可能已经存在某些^®元素的事实。在这种情况下，它们将替换为：^{^®}。

我认为像这样的解决方案可能更有意义。

$("body").html(
   $("body").html().replace(/<sup>&reg;<\/sup>/gi, '&reg;').
        replace(/&reg;/gi, '<sup>&reg;</sup>').
        replace(/®/gi, '<sup>&reg;</sup>')
);

Answer 9

如果你不介意使用jQuery：

$("p,h1,h2,h3,h4").each(function(){
    $(this).html($(this).html().replace(/&reg;/gi, '<sup>&reg;</sup>').replace(/®/gi, '<sup>&reg;</sup>'));
});

它比整个body标记的动作要快得多（如Robert's和Victor's个答案）

Answer 10

如果您打算使用正则表达式，为什么不通过一次调用来清理它

$("p,h1,h2,h3,h4,h5,h6,li,dd,dt,a").each(function(){
    var $this = $(this);
    $this.html($this.html().replace(/(<sup>)?(&reg;|®)(<\/sup>)?/gi, '<sup>®</sup>'));
});

我不建议像OP最终那样在身体上做这个。它可能会干扰可能包含符号的内联javascript。

Answer 11

我使用下面的CSS在HTML中放置商标注册符号®，结果是带有链接的®符号，该符号更小且位于普通文本上方。注意示例中有两个链接。这样做的原因是因为我希望对主锚链接加下划线，而®符号却不加下划线。

.trademark {
  position: relative;
  font-size: 40%;
  top: -1.2em;
}

.no-style {
 text-decoration: none !important;
}

在React中使用JSX的CSS示例：

 <a href="https://www.photoprintsnow.com">Photo Prints Now</a><a 
 href="https://www.photoprintsnow.com" className="no-style"><span 
 className="trademark">®</span></a>

带有CSS的HTML的示例，其中语法是class而不是className：

 <a href="https://www.photoprintsnow.com">Photo Prints Now</a><a 
 href="https://www.photoprintsnow.com" class="no-style"><span class="trademark">®</span> 
 </a>

带有STYLE的HTML中的示例：

 <a href="https://www.photoprintsnow.com">Photo Prints Now</a>
 <a href="https://www.photoprintsnow.com" style="text-decoration: none; "> 
 <span style="position: relative;font-size: 40% ;top: -1.2em;">®</span>
 </a>

CSS上标注册商标

11 个答案: