CODEWITHSUNDEEP
htmlcssunicode
JPB
JPB

Reputation: 600

Unicode character font-size not applied on chrome mobile. Why?

I just loaded my site onto the server and noticed that although the styles are applied to the unicode character in developer tools and online on my tablet, the size attribute is not applied when viewing from mobile (chrome).

See http://www.perth-soakwells.net for live example. For reference the e in the logo is 7em.

Does anyone know why or have an alternative approach. I am using the circle as part of a logo. See link above.

Code below.

.logo_circle{
font-size: 9em;
position: absolute;
top: 0; 
left: 0; 
color: white;
font-family: "Arial", "Lucida Sans Regular", "DejaVu Serif", "Verdana", "Unifont", "Trebuchet MS";}

body{background-color:black;}
<div class="logo_circle">&#9679;</div>

Upvotes: 0

Views: 457

Answers (2)

bobince
bobince

Reputation: 536479

The size property is certainly applied for me. However the logo still does not look the same on my mobile browser as on my Windows desktop, and it looks different again on my Linux desktop.

This is because the font you have chosen (Arial as first choice) is not available everywhere. On platforms that do not have that font, you'll get something different, and the exact shape and radius of the character U+25CF Black Circle ● varies between fonts.

You could either embed a web font with the character to try to get a consistent rendering or, probably better, create the logo as an SVG image containing a fixed path instead of relying on text.

Upvotes: 1

NK Chaudhary
NK Chaudhary

Reputation: 401

**YOU can do like this**

<!DOCTYPE html>
<html>
<head>

</script>
<style>
.logo_circle{
font-size: 9em;
position: absolute;
top: 0; 
left: 0; 
color: white;
font-family: "Arial", "Lucida Sans Regular", "DejaVu Serif", "Verdana", "Unifont", "Trebuchet MS";}
.logo{
transform: rotate(340deg);
    font-size: 3em;
    position: absolute;
    top: 0;
    left: 0;
    margin: 63px 22px;
    color: #533E9D;
    font-weight: 600;
}
body{background-color:black;}
</style>
</head>
<body>
<div class="logo_circle">&#9679;</div>
<div class="logo">N</div>
</body>
</html>

Upvotes: 0

Related Questions