用簡單的點擊改變字體

-1

Iam在一個網站上工作，我想向人們展示不同頁面上網站上兩種字體的區別。用簡單的點擊改變字體

有沒有一種方法可以編碼，我可以輕鬆地在字體間切換？

我正在考慮用第二種字體制作第二個樣式表，並使用jQuery禁用/啓用樣式表。但這意味着我必須將其放在每個頁面上。

有沒有更好的方法呢？

來源

2017-02-01 job

有幾個方法可以做到這一點...你有什麼儘管試過嗎？ – Option

創建一個按鈕，切換正文標籤上的類。 – Turnip

@option沒有嘗試過任何東西。一直在尋找谷歌解決方案像一個小時，但沒有找到什麼我認爲什麼可以工作，所以我決定在這裏問問題。 – job

您可以用兩個班，不同的字體和撥動它們使用JS/jQuery的

來源

2017-02-01 13:40:09

但是這意味着我必須將該代碼放在每個單獨的html頁面上嗎？或者我錯了... – job

我想我即將使用我的頁腳在一個包括，所以我現在建立在那裏。只需點擊一下，我就可以在現在更改頁面。 – job

是的，你可以做到這一點很容易與JS/jQuery的。你只需簡單地用不同的「font-familys」來切換一個類。

這裏將是一個例子，如果你想改變字體在一個DIV：

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>

來源

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

是的，我現在也有類似的東西。唯一的問題是，當你切換頁面時，字體被重新設置爲原來的字體。 – job

你可以使用cookies來記住變化：http://www.w3schools.com/js/js_cookies.asp – Option

啊，當然是@Option - 沒有這個想法;） – 5rsly

用簡單的點擊改變字體

回答

相關問題