삼성 갤럭시에서 특수문자에 css 효과가 안먹는 증상

Written by 안반장 -

on 2월 29, 2016

다음과 같이 리뷰 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과 같은 대체 폰트를 이용해서 해결 하는 방법도 있으니 참고하시면 됩니다.

<span class"icon-star"></span>

@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: &amp;amp;quot;\e600&amp;amp;quot;;&amp;lt;br /&amp;gt;&amp;lt;br /&amp;gt;
}&lt;/textarea&gt;&lt;/div&gt;
&lt;div class="crayon-main"&gt;
&lt;table class="crayon-table"&gt;
&lt;tbody&gt;
&lt;tr class="crayon-row"&gt;
&lt;td class="crayon-nums "&gt;
&lt;div class="crayon-nums-content" style="font-size: 12px !important; line-height: 15px !important;"&gt;
&lt;div class="crayon-num"&gt;1&lt;/div&gt;
&lt;div class="crayon-num crayon-striped-num"&gt;2&lt;/div&gt;
&lt;div class="crayon-num"&gt;3&lt;/div&gt;
&lt;div class="crayon-num crayon-striped-num"&gt;4&lt;/div&gt;
&lt;div class="crayon-num"&gt;5&lt;/div&gt;
&lt;div class="crayon-num crayon-striped-num"&gt;6&lt;/div&gt;
&lt;div class="crayon-num"&gt;7&lt;/div&gt;
&lt;div class="crayon-num crayon-striped-num"&gt;8&lt;/div&gt;
&lt;div class="crayon-num"&gt;9&lt;/div&gt;
&lt;div class="crayon-num crayon-striped-num"&gt;10&lt;/div&gt;
&lt;div class="crayon-num"&gt;11&lt;/div&gt;
&lt;div class="crayon-num crayon-striped-num"&gt;12&lt;/div&gt;
&lt;div class="crayon-num"&gt;13&lt;/div&gt;
&lt;div class="crayon-num crayon-striped-num"&gt;14&lt;/div&gt;
&lt;div class="crayon-num"&gt;15&lt;/div&gt;
&lt;div class="crayon-num crayon-striped-num"&gt;16&lt;/div&gt;
&lt;div class="crayon-num"&gt;17&lt;/div&gt;
&lt;div class="crayon-num crayon-striped-num"&gt;18&lt;/div&gt;
&lt;div class="crayon-num"&gt;19&lt;/div&gt;
&lt;div class="crayon-num crayon-striped-num"&gt;20&lt;/div&gt;
&lt;div class="crayon-num"&gt;21&lt;/div&gt;
&lt;div class="crayon-num crayon-striped-num"&gt;22&lt;/div&gt;
&lt;div class="crayon-num"&gt;23&lt;/div&gt;
&lt;/div&gt;
&lt;/td&gt;
&lt;td class="crayon-code"&gt;
&lt;div class="crayon-pre" style="font-size: 12px !important; line-height: 15px !important;"&gt;
&lt;div id="crayon-58bf42aa0ea08296452359-1" class="crayon-line"&gt;&lt;span class="crayon-sy"&gt;@&lt;/span&gt;&lt;span class="crayon-e"&gt;font&lt;/span&gt;&lt;span class="crayon-o"&gt;-&lt;/span&gt;&lt;span class="crayon-e"&gt;face&lt;/span&gt; &lt;span class="crayon-sy"&gt;{&lt;/span&gt;&lt;/div&gt;
&lt;div id="crayon-58bf42aa0ea08296452359-2" class="crayon-line crayon-striped-line"&gt;&lt;span class="crayon-h"&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&lt;/span&gt;&lt;span class="crayon-v"&gt;font&lt;/span&gt;&lt;span class="crayon-o"&gt;-&lt;/span&gt;&lt;span class="crayon-v"&gt;family&lt;/span&gt;&lt;span class="crayon-o"&gt;:&lt;/span&gt; &lt;span class="crayon-o"&gt;&amp;amp;&lt;/span&gt;&lt;span class="crayon-p"&gt;#039;icomoon';&lt;/span&gt;&lt;/div&gt;
&lt;div id="crayon-58bf42aa0ea08296452359-3" class="crayon-line"&gt;&lt;span class="crayon-h"&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&lt;/span&gt;&lt;span class="crayon-v"&gt;src&lt;/span&gt;&lt;span class="crayon-o"&gt;:&lt;/span&gt; &lt;span class="crayon-e"&gt;url&lt;/span&gt;&lt;span class="crayon-sy"&gt;(&lt;/span&gt;&lt;span class="crayon-o"&gt;&amp;amp;&lt;/span&gt;&lt;span class="crayon-p"&gt;#039;fonts/icomoon.eot?4n7iw5');&lt;/span&gt;&lt;/div&gt;
&lt;div id="crayon-58bf42aa0ea08296452359-4" class="crayon-line crayon-striped-line"&gt;&lt;span class="crayon-h"&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&lt;/span&gt;&lt;span class="crayon-v"&gt;src&lt;/span&gt;&lt;span class="crayon-o"&gt;:&lt;/span&gt; &lt;span class="crayon-e"&gt;url&lt;/span&gt;&lt;span class="crayon-sy"&gt;(&lt;/span&gt;&lt;span class="crayon-o"&gt;&amp;amp;&lt;/span&gt;&lt;span class="crayon-p"&gt;#039;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');&lt;/span&gt;&lt;/div&gt;
&lt;div id="crayon-58bf42aa0ea08296452359-5" class="crayon-line"&gt;&lt;span class="crayon-h"&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&lt;/span&gt;&lt;span class="crayon-v"&gt;font&lt;/span&gt;&lt;span class="crayon-o"&gt;-&lt;/span&gt;&lt;span class="crayon-v"&gt;weight&lt;/span&gt;&lt;span class="crayon-o"&gt;:&lt;/span&gt; &lt;span class="crayon-v"&gt;normal&lt;/span&gt;&lt;span class="crayon-sy"&gt;;&lt;/span&gt;&lt;/div&gt;
&lt;div id="crayon-58bf42aa0ea08296452359-6" class="crayon-line crayon-striped-line"&gt;&lt;span class="crayon-h"&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&lt;/span&gt;&lt;span class="crayon-v"&gt;font&lt;/span&gt;&lt;span class="crayon-o"&gt;-&lt;/span&gt;&lt;span class="crayon-v"&gt;style&lt;/span&gt;&lt;span class="crayon-o"&gt;:&lt;/span&gt; &lt;span class="crayon-v"&gt;normal&lt;/span&gt;&lt;span class="crayon-sy"&gt;;&lt;/span&gt;&lt;/div&gt;
&lt;div id="crayon-58bf42aa0ea08296452359-7" class="crayon-line"&gt;&lt;span class="crayon-sy"&gt;}&lt;/span&gt;&lt;/div&gt;
&lt;div id="crayon-58bf42aa0ea08296452359-8" class="crayon-line crayon-striped-line"&gt;&amp;nbsp;&lt;/div&gt;
&lt;div id="crayon-58bf42aa0ea08296452359-9" class="crayon-line"&gt;&lt;span class="crayon-sy"&gt;[&lt;/span&gt;&lt;span class="crayon-t"&gt;class&lt;/span&gt;&lt;span class="crayon-o"&gt;^=&lt;/span&gt;&lt;span class="crayon-o"&gt;&amp;amp;&lt;/span&gt;&lt;span class="crayon-v"&gt;quot&lt;/span&gt;&lt;span class="crayon-sy"&gt;;&lt;/span&gt;&lt;span class="crayon-v"&gt;icon&lt;/span&gt;&lt;span class="crayon-o"&gt;-&lt;/span&gt;&lt;span class="crayon-o"&gt;&amp;amp;&lt;/span&gt;&lt;span class="crayon-v"&gt;quot&lt;/span&gt;&lt;span class="crayon-sy"&gt;;&lt;/span&gt;&lt;span class="crayon-sy"&gt;]&lt;/span&gt;&lt;span class="crayon-sy"&gt;,&lt;/span&gt; &lt;span class="crayon-sy"&gt;[&lt;/span&gt;&lt;span class="crayon-t"&gt;class&lt;/span&gt;&lt;span class="crayon-o"&gt;*=&lt;/span&gt;&lt;span class="crayon-o"&gt;&amp;amp;&lt;/span&gt;&lt;span class="crayon-v"&gt;quot&lt;/span&gt;&lt;span class="crayon-sy"&gt;;&lt;/span&gt; &lt;span class="crayon-v"&gt;icon&lt;/span&gt;&lt;span class="crayon-o"&gt;-&lt;/span&gt;&lt;span class="crayon-o"&gt;&amp;amp;&lt;/span&gt;&lt;span class="crayon-v"&gt;quot&lt;/span&gt;&lt;span class="crayon-sy"&gt;;&lt;/span&gt;&lt;span class="crayon-sy"&gt;]&lt;/span&gt; &lt;span class="crayon-sy"&gt;{&lt;/span&gt;&lt;/div&gt;
&lt;div id="crayon-58bf42aa0ea08296452359-10" class="crayon-line crayon-striped-line"&gt;&lt;span class="crayon-h"&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&lt;/span&gt;&lt;span class="crayon-v"&gt;font&lt;/span&gt;&lt;span class="crayon-o"&gt;-&lt;/span&gt;&lt;span class="crayon-v"&gt;family&lt;/span&gt;&lt;span class="crayon-o"&gt;:&lt;/span&gt; &lt;span class="crayon-o"&gt;&amp;amp;&lt;/span&gt;&lt;span class="crayon-p"&gt;#039;icomoon';&lt;/span&gt;&lt;/div&gt;
&lt;div id="crayon-58bf42aa0ea08296452359-11" class="crayon-line"&gt;&lt;span class="crayon-h"&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&lt;/span&gt;&lt;span class="crayon-v"&gt;speak&lt;/span&gt;&lt;span class="crayon-o"&gt;:&lt;/span&gt; &lt;span class="crayon-v"&gt;none&lt;/span&gt;&lt;span class="crayon-sy"&gt;;&lt;/span&gt;&lt;/div&gt;
&lt;div id="crayon-58bf42aa0ea08296452359-12" class="crayon-line crayon-striped-line"&gt;&lt;span class="crayon-h"&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&lt;/span&gt;&lt;span class="crayon-v"&gt;font&lt;/span&gt;&lt;span class="crayon-o"&gt;-&lt;/span&gt;&lt;span class="crayon-v"&gt;style&lt;/span&gt;&lt;span class="crayon-o"&gt;:&lt;/span&gt; &lt;span class="crayon-v"&gt;normal&lt;/span&gt;&lt;span class="crayon-sy"&gt;;&lt;/span&gt;&lt;/div&gt;
&lt;div id="crayon-58bf42aa0ea08296452359-13" class="crayon-line"&gt;&lt;span class="crayon-h"&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&lt;/span&gt;&lt;span class="crayon-v"&gt;font&lt;/span&gt;&lt;span class="crayon-o"&gt;-&lt;/span&gt;&lt;span class="crayon-v"&gt;weight&lt;/span&gt;&lt;span class="crayon-o"&gt;:&lt;/span&gt; &lt;span class="crayon-v"&gt;normal&lt;/span&gt;&lt;span class="crayon-sy"&gt;;&lt;/span&gt;&lt;/div&gt;
&lt;div id="crayon-58bf42aa0ea08296452359-14" class="crayon-line crayon-striped-line"&gt;&lt;span class="crayon-h"&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&lt;/span&gt;&lt;span class="crayon-v"&gt;font&lt;/span&gt;&lt;span class="crayon-o"&gt;-&lt;/span&gt;&lt;span class="crayon-v"&gt;variant&lt;/span&gt;&lt;span class="crayon-o"&gt;:&lt;/span&gt; &lt;span class="crayon-v"&gt;normal&lt;/span&gt;&lt;span class="crayon-sy"&gt;;&lt;/span&gt;&lt;/div&gt;
&lt;div id="crayon-58bf42aa0ea08296452359-15" class="crayon-line"&gt;&lt;span class="crayon-h"&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&lt;/span&gt;&lt;span class="crayon-v"&gt;text&lt;/span&gt;&lt;span class="crayon-o"&gt;-&lt;/span&gt;&lt;span class="crayon-v"&gt;transform&lt;/span&gt;&lt;span class="crayon-o"&gt;:&lt;/span&gt; &lt;span class="crayon-v"&gt;none&lt;/span&gt;&lt;span class="crayon-sy"&gt;;&lt;/span&gt;&lt;/div&gt;
&lt;div id="crayon-58bf42aa0ea08296452359-16" class="crayon-line crayon-striped-line"&gt;&lt;span class="crayon-h"&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&lt;/span&gt;&lt;span class="crayon-v"&gt;line&lt;/span&gt;&lt;span class="crayon-o"&gt;-&lt;/span&gt;&lt;span class="crayon-v"&gt;height&lt;/span&gt;&lt;span class="crayon-o"&gt;:&lt;/span&gt; &lt;span class="crayon-cn"&gt;1&lt;/span&gt;&lt;span class="crayon-sy"&gt;;&lt;/span&gt; &lt;span class="crayon-c"&gt;/* Better Font Rendering =========== */&lt;/span&gt;&lt;/div&gt;
&lt;div id="crayon-58bf42aa0ea08296452359-17" class="crayon-line"&gt;&lt;span class="crayon-h"&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&lt;/span&gt;&lt;span class="crayon-o"&gt;-&lt;/span&gt;&lt;span class="crayon-v"&gt;webkit&lt;/span&gt;&lt;span class="crayon-o"&gt;-&lt;/span&gt;&lt;span class="crayon-v"&gt;font&lt;/span&gt;&lt;span class="crayon-o"&gt;-&lt;/span&gt;&lt;span class="crayon-v"&gt;smoothing&lt;/span&gt;&lt;span class="crayon-o"&gt;:&lt;/span&gt; &lt;span class="crayon-v"&gt;antialiased&lt;/span&gt;&lt;span class="crayon-sy"&gt;;&lt;/span&gt;&lt;/div&gt;
&lt;div id="crayon-58bf42aa0ea08296452359-18" class="crayon-line crayon-striped-line"&gt;&lt;span class="crayon-h"&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&lt;/span&gt;&lt;span class="crayon-o"&gt;-&lt;/span&gt;&lt;span class="crayon-v"&gt;moz&lt;/span&gt;&lt;span class="crayon-o"&gt;-&lt;/span&gt;&lt;span class="crayon-v"&gt;osx&lt;/span&gt;&lt;span class="crayon-o"&gt;-&lt;/span&gt;&lt;span class="crayon-v"&gt;font&lt;/span&gt;&lt;span class="crayon-o"&gt;-&lt;/span&gt;&lt;span class="crayon-v"&gt;smoothing&lt;/span&gt;&lt;span class="crayon-o"&gt;:&lt;/span&gt; &lt;span class="crayon-v"&gt;grayscale&lt;/span&gt;&lt;span class="crayon-sy"&gt;;&lt;/span&gt;&lt;/div&gt;
&lt;div id="crayon-58bf42aa0ea08296452359-19" class="crayon-line"&gt;&lt;span class="crayon-sy"&gt;}&lt;/span&gt;&lt;/div&gt;
&lt;div id="crayon-58bf42aa0ea08296452359-20" class="crayon-line crayon-striped-line"&gt;&amp;nbsp;&lt;/div&gt;
&lt;div id="crayon-58bf42aa0ea08296452359-21" class="crayon-line"&gt;&lt;span class="crayon-sy"&gt;.&lt;/span&gt;&lt;span class="crayon-v"&gt;icon&lt;/span&gt;&lt;span class="crayon-o"&gt;-&lt;/span&gt;&lt;span class="crayon-v"&gt;star&lt;/span&gt;&lt;span class="crayon-o"&gt;:&lt;/span&gt;&lt;span class="crayon-e"&gt;before&lt;/span&gt; &lt;span class="crayon-sy"&gt;{&lt;/span&gt;&lt;/div&gt;
&lt;div id="crayon-58bf42aa0ea08296452359-22" class="crayon-line crayon-striped-line"&gt;&lt;span class="crayon-h"&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&lt;/span&gt;&lt;span class="crayon-v"&gt;content&lt;/span&gt;&lt;span class="crayon-o"&gt;:&lt;/span&gt; &lt;span class="crayon-o"&gt;&amp;amp;&lt;/span&gt;&lt;span class="crayon-v"&gt;quot&lt;/span&gt;&lt;span class="crayon-sy"&gt;;&lt;/span&gt;&lt;span class="crayon-sy"&gt;\&lt;/span&gt;&lt;span class="crayon-v"&gt;e600&lt;/span&gt;&lt;span class="crayon-o"&gt;&amp;amp;&lt;/span&gt;&lt;span class="crayon-v"&gt;quot&lt;/span&gt;&lt;span class="crayon-sy"&gt;;&lt;/span&gt;&lt;span class="crayon-sy"&gt;;&lt;/span&gt;&lt;/div&gt;
&lt;div id="crayon-58bf42aa0ea08296452359-23" class="crayon-line"&gt;&lt;span class="crayon-sy"&gt;}&lt;/span&gt;&lt;/div&gt;
&lt;/div&gt;
&lt;/td&gt;
&lt;/tr&gt;
&lt;/tbody&gt;
&lt;/table&gt;
&lt;/div&gt;
&lt;/div&gt;

Categories:

Development

Tags:

No Tag

삼성 갤럭시에서 특수문자에 css 효과가 안먹는 증상

No responses yet

답글 남기기 응답 취소