Why does this arrow appear blue on tablets?
Question
I am using the following HTML code:
<!DOCTYPE html>
<html lang="en">
<head>
<link href="style.css" rel="stylesheet">
</head>
<body>
<div>This arrow here: <span><a href="#">↩</a></span></div>
</body>
</html>
And this is my style.css :
span > a {
color: #F5413C;
}
On Firefox 31 (Windows 8), it displays just fine:
However, on my tablet (Samsung Galaxy Note 10.1 2014) the arrow appears as a thick blue:
How do I fix this? Can this be fixed? Is there, somewhere, a list of ASCII characters that display fine across all platforms?
Unfortunately, I can't find developer tools on Chrome on the tablet, so I can't diagnose this problem.
1 answers
solution1
1 2014-08-11 11:47:20
The arrow is rendered in an emoji font, which likely exists on the tablet but does not exist on your desktop. Or the emoji font is the only font on the tablet that contains this character at all, while your desktop has a wider variety of fonts which contain this glyph in a "more traditional" form and are chosen before any emoji font.
The solution is to set the font explicitly to a font which shows the character in the way you desire, and which also exists on the tablet. If the tablet doesn't have any font that contains this character other than the one you're seeing, there's not much you can do besides using an image instead.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.