レスポンシブデザインを使ってウェブサイトを開発しています。Unicode文字&#9776(☰記号)を表示しようとしていますが、Androidに表示されません。このキャラクターを正しく表示する方法はありますか、それとも画像を作成する必要がありますか?
ありがとう
で示される文字☰
はAndroidフォントには表示されず、他の環境でもそのフォントの範囲は比較的制限されています。
@font-face
基本的なオプションは、テキストサイズに適切に拡大縮小された画像を介してダウンロード可能なフォント(Webフォント)を使用することです。
これが必要な唯一の「特殊」文字である場合は、画像アプローチが適している可能性があります。それは簡単で、文字の形状は非常に単純なので、適切に拡大縮小することが期待できます。
ダウンロード可能なフォントを使用すると、特に文字がテキスト内でインラインで使用されている場合に、より良い結果が得られる可能性があります。ただし、QuiviraやSymbolaのような大きな(> 1 Mバイト)フリーフォントが必要になる可能性があります。これは、1文字だけの場合、不均衡なオーバーヘッドを意味するように思われます。
詳細については、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";
}
}
私はこのコードをhamburger-menu-iconに使用します:
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);
}
}