JSfiddle

Question

我使用Markdown和HTML作为我的讲义，当我需要一个像Natural结合这样的不寻常的角色时，我必须使用unmemorable code＆amp;＃8904; （⋈）。有没有办法可以定义一个符号，比如＆amp; MYNATJOIN;在一个CSS文件（或任何地方），将在HTML呈现时用⋈替换？

CCP

Answer 1

您可以在HTML中使用字符“⋈”，前提是您使用UTF-8并正确地声明它，无论如何应该如此;见我的Guide to using special characters in HTML。

或者，更不可靠的是，您可以使用HTML5 character reference &bowtie;。它属于添加的命名引用，完全没有必要，并且不受任何早于2011年的浏览器版本的支持。

为了定义您可以用作&MYNATJOIN;的自己的权利，您需要使用XML内容类型来提供文档，这意味着IE的旧版本会阻塞它并且它将是以严格模式处理（即，任何违反XML格式约束的行为都会导致向用户显示错误消息，而不会显示文档内容）。在这些条件下，您可以使用XML实体声明。

CSS用于可选的表示性建议，由于CSS caveats，因此不应用于添加重要内容。如果您将“⋈”用于装饰目的或在视觉上突出显示已经口头或标记强调的内容，您可以使用generated content将其添加到渲染中，例如

.funny:after { content: " ⋈" }

为了在funny类的每个元素的内容中附加一个空格和“⋈”字符。

Answer 2

您可以在文档顶部添加一个小的javascript，以便在您的＆＃34;用户定义的实体上使用您希望它引用的实体进行全局替换。加载文档时会运行此函数。

JS （在<head>代码中）

window.onload=function () {
    document.body.innerHTML=document.body.innerHTML
       .replace(/&amp;MYNATJOIN;/gi,"&#8904;");
};

HTML （在<body>代码中）

these are some notes. <br />
the entity &MYNATJOIN; should now be a bowtie

您可以通过添加更多替换语句来定义更多实体

请参阅下面的代码段：

＆＃13;

window.onload=function () {
    console.log(document.body.innerHTML);
document.body.innerHTML=document.body.innerHTML.replace(/&amp;MYNATJOIN;/gi,"&#8904;");
    
        console.log(document.body.innerHTML);
document.body.innerHTML=document.body.innerHTML.replace(/&amp;PLUSMINUS;/gi,"&#8723;");
    
        console.log(document.body.innerHTML);
document.body.innerHTML=document.body.innerHTML.replace(/&amp;SINEWAVE;/gi,"&#8767;");
};

＆＃13;

<body>
these are some notes.<br />
the entity &MYNATJOIN; should now be a bowtie <br />
a plus or minus looks like this &PLUSMINUS; <br />and how about a sine wave? &SINEWAVE;
</body>

＆＃13;

请注意：

有一些方法可以在文档加载时触发javascript运行，但window.onload很简单，可以完成工作。
替换使用正则表达式，因为这是在javascript中执行全局字符串替换的要求。
HTML解析器会将HTML文档中的任何&隐式转换为&。

Answer 3

<强> HTML

<span class='mynatjoin'><span/>

<强> CSS

.mynatjoin:before{
    content: "\22C8";
}

<强>结果

⋈

JSfiddle

如果您希望它更简单，并且您愿意破坏HTML有效性，则可以使用标记，而不是像这样的类：

<强> HTML

<mynatjoin />

<强> CSS

mynatjoin:before{
    content: "\22C8";
}

<强>结果

⋈

JSfiddle

我不知道这是否会在某些浏览器中引起问题，但我在最新的Chrome，FF和IE中进行了测试。有效。可能不会在旧浏览器中工作。

如果您想按照指定的方式（{1}}进行操作，那么您需要使用某种扫描文档的javascript并用&MYNATJOIN;替换&MYNATJOIN;。我认为纯粹的html和css

是不可能的

根据上面的示例，您可以拥有多个css类来支持您的符号。 You can use this找到相应符号的css代码。

如何为自然连接等特殊字符定义HTML符号：⋈

3 个答案:

JSfiddle

JSfiddle