Color de estilo CSS ineficaz en estrellas (& # 9733;) en Samsung con Android 4.4 KitKat
En mi sitio web móvil dedicado, uso el carácter de estrella html ★ ★ Y aplico CSS en él, especialmente el color .
<span class="orange">★ ★ ★</span> <span class="grey">★ ★</span> .orange { color: orange: } .grey { color: grey; }
Todo funciona bien en la mayoría de los navegadores y sistemas operativos, así:
- Colisiones nativas recibidas en dispositivos Samsung sólo con las versiones Lollipop 5.0 y 5.1
- Cómo saber si Samsung Game Tuner está cambiando la relación de resolución
- Desactivación o detección del modo de ahorro de energía específico de la aplicación
- Android: Samsung "Smart Manager" aplicación de elevar las advertencias
- Acceder a la cámara frontal y posterior simultáneamente en los dispositivos Samsung Galaxy
Pero en los dispositivos Samsung con Android 4.4 kitkat (Galaxy S4, S5 …) , las estrellas son de estilo nativo de touchwiz (supongo) y la propiedad de color no tiene ningún efecto más en el navegador de acciones y Chrome, pero no Firefox! Y funciona bien en otros kitkat (LG G2, Nexus 7) o Samsung con Jelly Bean .
Intenté el estilo específico del webkit como -webkit-text-fill-color , sin efecto .
Busqué todo el estilo de webkit, pero nada parece corresponder excepto -webkit-text-fill-color .
Conozco otras formas de hacer estrellas como imágenes, fuentes personalizadas o incluso formas CSS, pero más simples sería mejor.
Así que, ¿alguna vez has visto eso y encontrado el estilo mágico que funciona?
Gracias.
- Trigger galaxia S4 sensor de infrarrojos de desarrollo de aplicaciones?
- Camera.Parameters bloqueo específico del dispositivo (Samsung S3 Mini)
- La actividad no se reproducirá al azar, muestra sólo la pantalla en blanco en Samsung
- Hacer la aplicación Android de varios idiomas
- Soporte para ventanas múltiples de Samsung - Tamaño de pantalla
- Appcompat-v7 v21.0.0 causando bloqueo en dispositivos Samsung con Android v4.2.2
- Cubeta de pantalla samsung note 2 y note 3
- Sincronización personalizada que no funciona con la cuenta de Google (com.google) en algunos dispositivos Samsung
Encontré cuál era el problema. Está dentro de las fuentes del sistema, en este archivo exactamente:
/system/fonts/NotoColorEmoji.ttf
Al cambiar esta fuente (Samsung emoji) con otra con emoji nativo de Android, las estrellas aparecen normalmente. He encontrado el método aquí: XDA – [MOD] Emoji iOS / Google en Samsung S4 Kit Kat .
Así que no es posible ajustar las estrellas de Samsung directamente.
Dado que tengo varios colores y tamaños de estrellas, el trabajo en diseño sensible y la necesidad de manejar la retina y otros HD muestra, la imagen era demasiado oneroso para implementar.
He intentado formas CSS, pero como juego con diferentes tamaños en el diseño de respuesta (cambio de tamaño de fuente raíz en em modifica la página entera), algo preciso en un tamaño, no estaba en otro.
Así que usé font-face.
En Icomoon , elegí la estrella e hice una fuente personalizada. Puse el estilo correcto y eso es todo! Puedo aplicar CSS como yo quiero.
El código se ve así:
HTML:
<span class="icon-star"></span>
CSS:
@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"; }
- Cómo trabajar con la dimensión personalizada en Google Analytics v3 para la aplicación para Android
- Android alinea los elementos del menú a la izquierda en la barra de acción