Unicode字符字體大小不適用於Chrome移動設備。爲什麼？

我剛剛將我的網站加載到服務器上，並注意到儘管樣式適用於開發人員工具中的unicode字符，並且已在我的平板電腦上在線，但從移動設備（chrome）查看時，size屬性不適用。Unicode字符字體大小不適用於Chrome移動設備。爲什麼？

查看http://www.perth-soakwells.net的現場示例。作爲參考，徽標中的e是7em。

有誰知道爲什麼或有一個替代方法。我將該圓圈用作徽標的一部分。參見上面的鏈接。

下面的代碼。

.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>

來源

2016-08-25 JPB

您的網址無效 –

已修復。對不起， – JPB

找不到404錯誤 –

的大小屬性肯定是適用於我。但是，我的移動瀏覽器上的徽標與我的Windows桌面上的徽標仍然不一樣，並且在我的Linux桌面上看起來有所不同。

這是因爲您選擇的字體（Arial作爲第一選擇）在任何地方都不可用。在沒有這種字體的平臺上，你會得到不同的東西，字符U + 25CF黑圈●的確切形狀和半徑因字體而異。

你既可以嵌入Web字體與人物，試圖得到一個一致的渲染，或者可能會更好，創建標識爲包含固定的路徑，而不是依賴於文本的SVG圖像。

來源

2016-08-25 15:02:38 bobince

好的謝謝你的提示，我認爲它必須處理不同設備上的字體的不同解釋。徽標不是SVG的原因是因爲SEO，所以它可以被cawlers讀取，但我認爲我現在將該圈子變成SVG。 – JPB

**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>

來源

2016-08-25 09:04:44

對不起，我看不到變化？ – JPB

根據您的設計調整保證金，可能是我的給定保證金在您的屏幕上不可見。 –

Unicode字符字體大小不適用於Chrome移動設備。爲什麼？

回答

相關問題