Wechsel zwischen den Fonts mit einem einfachen Klick

-1

Iam arbeitet an einer Website und ich möchte jemandem den Unterschied zwischen zwei Schriftarten auf der Website auf verschiedenen Seiten zeigen.Wechsel zwischen den Fonts mit einem einfachen Klick

Gibt es eine Möglichkeit, dass ich es so programmieren kann, dass ich einfach zwischen den Schriftarten wechseln kann?

Ich habe darüber nachgedacht, ein zweites Stylesheet mit der zweiten Schriftart zu erstellen und jQuery zu verwenden, um das Stylesheet zu deaktivieren/aktivieren. Aber das bedeutet, dass ich das auf jeder Seite platzieren muss.

Gibt es einen besseren Weg dafür?

Quelle

2017-02-01 job

Es gibt ein paar Möglichkeiten, wie Sie dies tun könnte ... Was Sie aber versucht haben? – Option

Erstellen Sie eine Schaltfläche, die eine Klasse für das body-Tag umschaltet. – Turnip

@option Havent hat alles versucht. Ich habe eine Stunde lang nach einer Lösung für Google gesucht, konnte aber nichts finden, was ich dachte, was funktionieren könnte, also entschied ich mich, die Frage hier zu stellen. – job

können Sie zwei Klassen mit unterschiedlichen Schriftarten verwenden und Toggle sie mit JS/jQuery

Quelle

2017-02-01 13:40:09

Aber das bedeutet, dass ich diesen Code auf jeder einzelnen HTML-Seite richtig stellen muss? Oder liege ich falsch ... – job

Ich dachte mir, ich benutze meine Fußzeile in einem Include, so dass ich jetzt dort einbaute. Mit einem Klick kann ich die Seite jetzt ändern. – job

Ja Sie, dass leicht mit Js/JQuery tun können. Sie einfach nur eine Klasse mit anderen "font-families".

Hier wäre ein Beispiel sein, wenn Sie die Schriftart in einem div ändern wollen:

body, html { 
 
    width: 100%; 
 
    height: 100%; 
 
    padding: 0; 
 
    margin: 0; 
 
} 
 

 
.text { 
 
    height: 100%; 
 
    width: 100%; 
 
    padding: 500px; 
 
    box-sizing: border-box; 
 
    font-family: cursive; 
 
} 
 

 
.font { 
 
    font-family: monospace !important; 
 
} 
 

 
button { 
 
    position: relative; 
 
    left: 50%; 
 
    transform: translate(-50%); 
 
    background-color: black; 
 
    border: none; 
 
    color: white; 
 
    margin: 20px; 
 
}

<!DOCTYPE html> 
 
<html> 
 
    <head> 
 
    <meta charset="utf-8"> 
 
    <title>FontChange</title> 
 
    <link rel="stylesheet" type="text/css" href="test.css"> 
 
    
 
    <!-- Hosted jQuery libary --> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
 

 
    <script type="text/javascript"> 
 

 
    $(document).ready(function() { 
 
     $("button").click(function() { 
 
     $(".text").toggleClass("font"); 
 
     }) 
 
    }); 
 
    </script> 
 

 
    </head> 
 
    <body> 
 
    <div class="text"> 
 
     <button>Click me to change the font-family!</button></br> 
 
    
 
    
 
     Lorem ipsum dolor sit amet, consetetur  sadipscing elitr, sed diam nonumy eirmod tempor  invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. 
 
    </div> 
 

 
    </body> 
 
</html>

Quelle

2017-02-01 14:21:15 5rsly

Ja, ich habe jetzt auch so etwas. Die einzige Sache ist, dass wenn Sie Seiten wechseln, die Schriftart auf die ursprüngliche zurückgesetzt wird. – job

Sie könnten Cookies verwenden, um es an die Änderung zu erinnern: http://www.w3schools.com/js/js_cookies.asp – Option

ah, ja natürlich @Option - hatte diese Idee nicht;) – 5rsly

Wechsel zwischen den Fonts mit einem einfachen Klick

Antwort

Verwandte Themen