다음과 같이 리뷰 rating 기능을 개발 중
가급적 이미지는 사용하지 않기 위해 특수문자를 사용했습니다.
그랬더니 유독 Android kitkat 4.4을 OS로 사용하는 삼성의 갤럭시 기기들만 다음과 같이 보입니다.
이곳에는 어떤 CSS 효과도 적용되지 않았습니다.
결국 전 이미지를 사용하긴 했지만 여기저기 찾아보니 아래와 같이
[box type=”info”] /system/fonts/NotoColorEmoji.ttf[/box]
삼성의 기본 이모지 폰트를 안드로이드 기본 emoji 폰트로 대체하고 해결되었다 합니다.
자세한 내용은 이곳을 보시면 확인이 가능합니다.
http://forum.xda-developers.com/showthread.php?t=2618523
다른 대안으로 fontawesome이나 추가적으로 iconmoon과 같은 대체 폰트를 이용해서 해결 하는 방법도 있으니 참고하시면 됩니다.
HTML:
|
1
|
span class="icon–star"></span>
|
CSS:
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
|
@font–face {
font–family: 'icomoon’;
src: url('fonts/icomoon.eot?4n7iw5′);
src: url('fonts/icomoon.eot?#iefix4n7iw5′) format(’embedded-opentype’), url(‘fonts/icomoon.woff?4n7iw5’) format(‘woff’), url(‘fonts/icomoon.ttf?4n7iw5’) format(‘truetype’), url(‘fonts/icomoon.svg?4n7iw5#icomoon’) format(‘svg’);
font–weight: normal;
font–style: normal;
}
[class^="icon–"], [class*=" icon–"] {
font–family: 'icomoon’;
speak: none;
font–style: normal;
font–weight: normal;
font–variant: normal;
text–transform: none;
line–height: 1; /* Better Font Rendering =========== */
–webkit–font–smoothing: antialiased;
–moz–osx–font–smoothing: grayscale;
}
.icon–star:before {
content: "\e600";
}
|