3D立方體的選擇邊上的模糊文本

Question

我想創建一個立方體與文本的四面八方，但在一些文字看起來很模糊。快速谷歌搜索後，我發現添加-webkit-font-smoothing: subpixel-antialiased到包含元素解決了一些問題，但似乎並沒有解決它對我來說。第1面和第2面非常漂亮，但其餘4面都很模糊。我真的很感激，如果任何人都可以幫我把這一個弄清楚..我把一個jsfiddle放在一起，代碼如下。提前致謝！

fiddle

HTML：

<div id="options"> 
    <ul id="nav"> 
    <li id="front" class="show-front">Show 1</li> 
    <li id="back" class="show-back">Show 2</li> 
    <li id="right" class="show-right">Show 3</li> 
    <li id="left" class="show-left">Show 4</li> 
    <li id="top" class="show-top">Show 5</li> 
    <li id="bottom" class="show-bottom">Show 6</li> 
    <ul> 
</div> 

<div class="container"> 
    <div id="cube" class="show-right"> 
    <div class="side front"><h2>This is side 1</h2></div> 
     <div class="side back"><h2>This is side 2</h2></div> 
     <div class="side right"><h2>This is side 3</h2></div> 
     <div class="side left"><h2>This is side 4</h2></div> 
     <div class="side top"><h2>This is side 5</h2></div> 
     <div class="side bottom"><h2>This is side 6</h2></div> 
    </div> 
    </div> 

CSS：

#nav { 
    list-style: none; 
} 
#nav li:hover { 
    cursor: pointer; 
} 
.container { 
    width: 600px; 
    height: 600px; 
    position: relative; 
    margin: 1em 1em 1em 2em; 
    float: left; 
    -webkit-perspective: 1000px; 
    -moz-perspective: 1000px; 
    -ms-perspective: 1000px; 
    -o-perspective: 1000px; 
    perspective: 1000px; 
} 

.container #cube { 
    width: 100%; 
    height: 100%; 
    position: absolute; 
    -webkit-transform-style: preserve-3d; 
    -moz-transform-style: preserve-3d; 
    -ms-transform-style: preserve-3d; 
    -o-transform-style: preserve-3d; 
    transform-style: preserve-3d; 
    -webkit-transition: -webkit-transform 1s; 
    -moz-transition: -moz-transform 1s; 
    -ms-transition: -ms-transform 1s; 
    -o-transition: -o-transform 1s; 
    transition: transform 1s 
} 

.container #cube .side { 
    background: black; 
    margin: 0px; 
    display: block; 
    position: absolute; 
    width: 596px; 
    height: 596px; 
    color: white; 
    border-radius: 5px; 
    box-shadow: 0 0 15px black; 
    -webkit-backface-visibility: hidden; 
    -moz-backface-visibility: hidden; 
    -ms-backface-visibility: hidden; 
    -o-backface-visibility: hidden; 
    backface-visibility: hidden; 
} 

.container #cube .front { 
    -webkit-transform: translateZ(300px); 
    -moz-transform: translateZ(300px); 
    -ms-transform: translateZ(300px); 
    -o-transform: translateZ(300px); 
    transform: translateZ(300px); 
} 

.container #cube .back { 
    -webkit-transform: rotateX(-180deg) translateZ(300px); 
    -moz-transform: rotateX(-180deg) translateZ(300px); 
    -ms-transform: rotateX(-180deg) translateZ(300px); 
    -o-transform: rotateX(-180deg) translateZ(300px); 
    transform: rotateX(-180deg) translateZ(300px); 
} 

.container #cube .right { 
    -webkit-transform:rotateY(90deg) translateZ(300px); 
    -moz-transform:rotateY(90deg) translateZ(300px); 
    -ms-transform:rotateY(90deg) translateZ(300px); 
    -o-transform:rotateY(90deg) translateZ(300px); 
    transform:rotateY(90deg) translateZ(300px); 
} 

.container #cube .left { 
    -webkit-transform: rotateY(-90deg) translateZ(300px); 
    -moz-transform: rotateY(-90deg) translateZ(300px); 
    -ms-transform: rotateY(-90deg) translateZ(300px); 
    -o-transform: rotateY(-90deg) translateZ(300px); 
    transform: rotateY(-90deg) translateZ(300px); 
} 

.container #cube .top { 
    -webkit-transform: rotateX(90deg) translateZ(300px); 
    -moz-transform: rotateX(90deg) translateZ(300px); 
    -ms-transform: rotateX(90deg) translateZ(300px); 
    -o-transform: rotateX(90deg) translateZ(300px); 
    transform: rotateX(90deg) translateZ(300px); 
} 

.container #cube .bottom { 
    -webkit-transform: rotateX(-90deg) translateZ(300px); 
    -moz-transform: rotateX(-90deg) translateZ(300px); 
    -ms-transform: rotateX(-90deg) translateZ(300px); 
    -o-transform: rotateX(-90deg) translateZ(300px); 
    transform: rotateX(-90deg) translateZ(300px); 
} 

.container #cube.show-front { 
    -webkit-transform: translateZ(-300px); 
    -moz-transform: translateZ(-300px); 
    -ms-transform: translateZ(-300px); 
    -o-transform: translateZ(-300px); 
    transform: translateZ(-300px); 
} 

.container #cube.show-back { 
    -webkit-transform: translateZ(-300px) rotateX(-180deg); 
    -moz-transform: translateZ(-300px) rotateX(-180deg); 
    -ms-transform: translateZ(-300px) rotateX(-180deg); 
    -o-transform: translateZ(-300px) rotateX(-180deg); 
    transform: translateZ(-300px) rotateX(-180deg); 
} 

.container #cube.show-right { 
    -webkit-transform: translateZ(-300px) rotateY(-90deg); 
    -moz-transform: translateZ(-300px) rotateY(-90deg); 
    -ms-transform: translateZ(-300px) rotateY(-90deg); 
    -o-transform: translateZ(-300px) rotateY(-90deg); 
    transform: translateZ(-300px) rotateY(-90deg); 
} 

.container #cube.show-left { 
    -webkit-transform: translateZ(-300px) rotateY(90deg); 
    -moz-transform: translateZ(-300px) rotateY(90deg); 
    -ms-transform: translateZ(-300px) rotateY(90deg); 
    -o-transform: translateZ(-300px) rotateY(90deg); 
    transform: translateZ(-300px) rotateY(90deg); 
} 

.container #cube.show-top { 
    -webkit-transform: translateZ(-300px) rotateX(-90deg); 
    -moz-transform: translateZ(-300px) rotateX(-90deg); 
    -ms-transform: translateZ(-300px) rotateX(-90deg); 
    -o-transform: translateZ(-300px) rotateX(-90deg); 
    transform: translateZ(-300px) rotateX(-90deg); 
} 

.container #cube.show-bottom { 
    -webkit-transform: translateZ(-300px) rotateX(90deg); 
    -moz-transform: translateZ(-300px) rotateX(90deg); 
    -ms-transform: translateZ(-300px) rotateX(90deg); 
    -o-transform: translateZ(-300px) rotateX(90deg); 
    transform: translateZ(-300px) rotateX(90deg); 
} 

Answer 1

每this question，要注意有趣的是WebKit的解釋文本作爲紋理，與向量，後-轉變。因此，首先呈現的文本具有向量呈現的優點，而後續的文本呈現作爲紋理。

嘗試放大字體，然後使用-webkit-transform：scale來人爲減小它。這實質上創建了更高分辨率的紋理。我不會廢話你說我想出了這個解決方案（功勞Duopixel），but I did update your fiddle。如果可能的話，嘗試使用無襯線字體，因爲它們往往比襯線朋友更易於擴展問題（儘管這不一定可靠）。我在給你的例子中使用了Arial。以下是適用於您的標題的代碼：

h2 { 
    font-family: 'Arial'; 
    font-size: 120px; 
    font-weight: 100; 
    text-align: center; 
    -webkit-transform: scale(.5); 
} 

祝您好運！