Verschwommener Text auf ausgewählten Seiten des 3D-Würfels

Question

Ich versuche, einen Würfel mit Text auf allen Seiten zu erstellen, aber auf einigen Seiten erscheint der Text verschwommen. Nach einer schnellen Google-Suche habe ich herausgefunden, dass das Hinzufügen von -webkit-font-smoothing: subpixel-antialiased zum umgebenden Element das Problem für einige gelöst hat, aber für mich scheint es nicht behoben zu sein. Seite 1 und 2 sind schön und klar, aber die restlichen 4 Seiten sind verschwommen. Ich wäre sehr dankbar, wenn mir jemand helfen könnte, das herauszufinden. Ich habe ein jsfiddle zusammengestellt und auch den Code darunter platziert. Danke im Voraus!

fiddle

HTML:

    Show 1
    Show 2
    Show 3
    Show 4
    Show 5
    Show 6

    Das ist Seite 1
      Das ist Seite 2
      Das ist Seite 3
      Das ist Seite 4
      Das ist Seite 5
      Das ist Seite 6

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

Laut dieser Frage ist interessant festzustellen, dass WebKit Ihren Text als Textur und nicht als Vektor nach der Transformation interpretiert. Daher hat der zuerst gerenderte Text den Vorteil der Vektorrendering, während nachfolgende Textrenderings als Texturen erfolgen.

Versuchen Sie, die Schrift zu vergrößern und sie dann künstlich zu verkleinern, indem Sie -webkit-transform: scale verwenden. Dies erstellt im Wesentlichen eine höher aufgelöste Textur. Ich werde Sie nicht anlügen und sagen, dass ich diese Lösung gefunden habe (das verdient Duopixel das Kredit), aber ich habe Ihr Fiddle aktualisiert. Versuchen Sie, wenn möglich, eine serifenlose Schriftart zu verwenden, da diese tendenziell resistenter gegen Skalierungsprobleme sind als ihre Serifen-Freunde (obwohl dies nicht unbedingt zuverlässig ist). Ich habe Arial im Beispiel verwendet, das ich Ihnen gegeben habe. Hier ist der Code, angewendet auf Ihre Überschriften:

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

Viel Glück!