Kann CSS3 die Schriftgröße ändern?

77

Wie kann man die Schriftgröße mit der Maus vergrößern? Farbübergänge funktionieren im Laufe der Zeit einwandfrei, aber die Schriftgröße wechselt aus irgendeinem Grund sofort.

Beispielcode:

body p {
     font-size: 12px;
     color: #0F9;
     transition:font-size 12s;
     -moz-transition:font-size 12s; /* Firefox 4 */
     -webkit-transition:font-size 12s; /* Safari and Chrome */
     -o-transition:font-size 12s;
     transition:color 12s;
     -moz-transition:color 12s; /* Firefox 4 */
     -webkit-transition:color 12s; /* Safari and Chrome */
     -o-transition:color 12s;
}

 p:hover {
      font-size: 40px;
      color:#FC0;
 }

html css css-transitions

— Eichhörnchen
quelle

104

Die Farbübergänge gehen mit der Zeit gut über, aber die Schriftart wechselt aus irgendeinem Grund sofort.

Ihr font-sizeÜbergang wird durch Ihren colorÜbergang überschrieben .

transition: font-size 12s; /* transition is set to 'font-size 12s' */
transition: color 12s;     /* transition is set to 'color 12s' !! */

Stattdessen müssen Sie alle zu einer Deklaration zusammenfassen:

transition: color 12s, font-size 12s;

Siehe: http://jsfiddle.net/thirtydot/6HCRs/

-webkit-transition: color 12s, font-size 12s;
   -moz-transition: color 12s, font-size 12s;
     -o-transition: color 12s, font-size 12s;
        transition: color 12s, font-size 12s;

(Oder verwenden Sie einfach das allSchlüsselwort: transition: all 12s;- http://jsfiddle.net/thirtydot/6HCRs/1/ ).

— dreißig Punkte
quelle

6

+ eine für die Verwendung des Wortes 'dagnabbit' als Antwort auf die Frage 'what in tarnation' von op: P #LanguageStyleMatching

— Bart

2

Das war OPs Phasing, jemand hat es aus irgendeinem Grund aus seiner Frage heraus bearbeitet.

— 30.

1

Ich würde argumentieren, das allSchlüsselwort aus Leistungsgründen nicht für den Übergang zu verwenden. Es kann Ihre Seite schrecklich langsam machen. transition: color 12s, font-size 12s;

— Entscheiden Sie sich

Gibt es eine Möglichkeit, den gleichen Effekt zu erzielen, jedoch mit den Eigenschaften Hintergrundfarbe und Hintergrundclip ? Ich versuche das :) und würde mich freuen, wenn es dafür bereits eine Lösung gibt.

— Leonardo Maffei

@LeonardoMaffei: Ich empfehle, eine neue Frage zu stellen, wenn Sie keine Antwort finden. Stellen Sie sicher, dass Sie Ihren Code, eine Demo und eine gute Erklärung dessen enthalten, was Sie versuchen zu tun.

— 30.

75

Versuchen Sie, den Übergang für alle Eigenschaften festzulegen:

-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
-ms-transition: all 0.3s ease;

es funktioniert auch.

ODER nur Schriftart : transition: font 0.3s ease.

— Artur Keyan
quelle

5

falsche Antwort, es funktioniert, aber die Schriftgröße ist keine "Untereigenschaft" der Schrift. Font-Eigenschaft existiert nicht, es ist eine Kurzform-Eigenschaft

— Kustolovic

25

Übergänge für font-sizescheinen pixelweise zu sein und sind daher nicht glatt.

Wenn es sich nur um eine Zeile handelt, können Sie diese möglicherweise verwenden transform: scale(.8). Skalieren Sie nach unten und nicht nach oben, damit Sie nicht an Qualität verlieren. transform-origin: 0 0Abhängig von Ihrer Textausrichtung müssen Sie wahrscheinlich auch einen anderen Wert verwenden.

— Charlie
quelle

Das ist ein wirklich guter Tipp! Es gab ruckartige Animationen in Schriftgröße auf Mobilgeräten, insbesondere auf Android, während auf dem Desktop alles in Ordnung war. Unter Berufung auf transform: scale()statt font-sizees fixiert. Es ist jetzt auf allen Plattformen reibungslos.

— Fabien Snauwaert

0

JS Fiddle Demo

Eine Alternative wäre, dass Sie auch ein Framework wie jQuery Transit verwenden können , um dies einfach für Sie zu tun:

Javascript:

$("p").hover( function () {
    //On hover in
    $("p").transition({ 'color': '#FC0', 'font-size': '40px' }, 1000);    
}, function () {
    //On hover out
    $("p").transition({ 'color': '#0F9', 'font-size': '12px' }, 1000);
});

CSS:

p 
{

font-size: 12px;
color: #0F9;

}

— ROFLwTIME
quelle

7

Die Frage bezieht sich nicht einmal auf Javascript.

— Charlie