我正在开发一个使用响应式设计的网站。我正在尝试显示 unicode 字符 ☰(☰ 符号),但它没有出现在 Android 上。有什么方法可以让这个角色正确显示,还是我需要用它制作图像?
谢谢
表示的字符☰
不会出现在 Android 字体中,其字体覆盖范围在其他环境中也相对有限。
基本选项是使用可下载的字体(网络字体),@font-face
并使用适当缩放到文本大小的图像。
如果这是您需要的唯一“特殊”字符,则图像方法可能是合适的:它很简单,并且字符的形状非常简单,可以很好地缩放。
使用可下载字体可能会产生更好的效果,尤其是当字符在文本内内联使用时。但是您可能需要 Quivira 或 Symbola 之类的字体,它们是大(> 1 MB)免费字体,如果仅用于一个字符,这似乎意味着不成比例的开销。
有关更多信息,请参阅我在 HTML 中使用特殊字符的指南。
为什么没有人建议 CSS3 方法超出了我的范围。几乎所有设备都支持这一点。
这是一个可以看到它的小提琴,http://jsfiddle.net/328k7/。
使用 CSS3 创建三元组,如下所示:
div {
content: "";
position: absolute;
left: 0;
display: block;
width: 16px;
top: 0;
height: 0;
-webkit-box-shadow: 1px 10px 1px 1px #69737d,1px 16px 1px 1px #69737d,1px 22px 1px 1px #69737d;
box-shadow: 0 10px 0 1px #69737d,0 16px 0 1px #69737d,0 22px 0 1px #69737d;
}
它没有为当前字体定义。如果您只关心自己的设备,则可以将字体更改为原来的样子,但确保其在所有设备上显示的唯一方法是使用图像。
查看 Android 上支持的字符:Android 字符集。好像不支持。您可能可以用<img src="http://www.fileformat.info/info/unicode/char/2630/trigram_for_heaven.png">
标签替换它。
[编辑] 链接的 URL 不再有效,但您仍然可以在 archive.org 上查看:
https://web.archive.org/web/20130603091753/http://www.ascendercorp.com/pdf/Droid_fonts。 pdf
我知道原来的帖子很旧。这就是我实现它的方式。
CSS
/*⮛*/
.caretdown:before {
font-size: 13px;
font-weight:900;
content:"\002b9b";
}
使用@media 标签在移动设备上替换
/* If the screen size is 600px or less */
@media only screen and (max-width: 600px) {
/*substitute ⮛ on mobile for ▼ */
.caretdown:before {
content:"\25BC";
}
}
我将此代码用于汉堡菜单图标:
public class MenuButton extends Button
{
public MenuButton(android.content.Context context){
super(context);
}
public MenuButton(android.content.Context context, android.util.AttributeSet attrs) {
super(context,attrs);
}
public MenuButton(android.content.Context context, android.util.AttributeSet attrs, int defStyleAttr) {
super(context,attrs,defStyleAttr);
}
public MenuButton(android.content.Context context, android.util.AttributeSet attrs, int defStyleAttr, int defStyleRes) {
super(context,attrs,defStyleAttr,defStyleRes);
}
Paint paint = new Paint();
@Override
protected void onDraw(Canvas canvas){
//super.onDraw(canvas);
MarginLayoutParams lp=(MarginLayoutParams)getLayoutParams();
float p=lp.rightMargin;
float w=getWidth()-lp.leftMargin-lp.rightMargin;
float h=getHeight()-lp.topMargin-lp.bottomMargin;
paint.setColor(Color.WHITE);
paint.setStrokeWidth(0.0f);
float ww=(h)/5.0f;
canvas.drawRect(0+p, ww*0+p, p+w, ww*1+p, paint);
canvas.drawRect(0+p, ww*2+p, p+w, ww*3+p, paint);
canvas.drawRect(0+p, ww*4+p, p+w, ww*5+p, paint);
}
}