填充“o” unicode中的字符或通过CSS模仿 [英] Filled "o" character in unicode or imitated via CSS

问题描述

我需要用HTML编写这段文字：

我尝试使用一些unicode字符，如●Unicode Character'BLACK CIRCLE '（U + 25CF）或⬤Unicode Character'BLACK大圈（U + 2B24），但他们需要一些样式（即大小不同于 o ），并且在某些系统和字体上显示问题。

您能否提出更好的解决方案？它可以是广泛接受的unicode字符或者一些CSS模仿（如果HTML仍然包含 Now。字符串以实现良好的索引），那将会很好。图像不是一个选项。

解决方案

我会建议使用CSS border-radius 创建实心的o圆圈。

span {font-family：sans-serif; font-size：50px;} i {display：inline-block; text-indent：-9999px;宽度：30px; height：30px;背景：黑色; vertical-align：middle; border-radius：50％;}

< span> N>< / i> w。< / span>

I need to write this text in HTML:

I tried to use some unicode characters like ● Unicode Character 'BLACK CIRCLE' (U+25CF) or ⬤ Unicode Character 'BLACK LARGE CIRCLE' (U+2B24) but they need some styling (i.e. the size is different than in o) and have problem displaying on some systems and fonts.

Can you suggest a better solution? It can be a wide-accepted unicode character or some CSS imitation (in that case it would be nice if HTML still contains Now. string for good indexing). Image is not an option.

解决方案

I would suggest to use CSS border-radius to create the solid "o" circle.

span {
    font-family: sans-serif;
    font-size: 50px;
}
i {
    display: inline-block;
    text-indent: -9999px;
    width: 30px;
    height: 30px;
    background: black;
    vertical-align: middle;
    border-radius: 50%;
}

<span>N<i>o</i>w.</span>

这篇关于填充“o” unicode中的字符或通过CSS模仿的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！