我想要文字不重新調整大小或移動css

我想使它使得當使用CTRL +或 - 時，文本不像下面的圖像那樣受到影響。我試過webkit，使用百分比而不是像素值，但它不起作用。我想要文字不重新調整大小或移動css

.header { 
 
     background-color: #FFFFFF; 
 
     height: 7%; 
 
     position: fixed; 
 
     top: 0; 
 
     left: 0; 
 
     width: 100%; 
 
     box-shadow: 0px 5px 10px #424242; 
 
    } 
 
    
 
    .body { 
 
     margin: 0; 
 
     -webkit-text-size-adjust: 0; 
 
    } 
 
    
 
    .main { 
 
    } 
 
    
 
    .hub { 
 
     margin-left: 10%; 
 
     margin-right: 10%; 
 
    } 
 
    @font-face { 
 
     font-family: coolvetica; 
 
     src: url("font/coolvetica rg.ttf"); 
 
    } 
 
    
 
    .title { 
 
     font-family: coolvetica; 
 
     font-size: x-large; 
 
     line-height: 180%; 
 
     margin-top: 0.35%; 
 
     margin-bottom: 0.35%; 
 
     height: 80%; 
 
     left: 1%; 
 
     position: absolute; 
 
     display: inline-block; 
 
     vertical-align: top; 
 
     overflow: hidden; 
 
    } 
 
    
 
    .navbar { 
 
     position: fixed; 
 
     top: 2%; 
 
     left: 14%; 
 
     list-style-type: none; 
 
     margin: 0; 
 
     padding: 0; 
 
    } 
 
    
 
    .item { 
 
     display: inline; 
 
     float: left; 
 
    } 
 
    
 
    .label { 
 
     color: black; 
 
     text-decoration: none; 
 
     padding: 8px; 
 
    } 
 
    
 
    .title-box { 
 
     height: 100%; 
 
     line-height: 100%; 
 
    }

<html> 
 
    <head> 
 
     <title>TheShieldNetwork</title> 
 
     <link href="style.css" rel="stylesheet"> 
 
    </head> 
 
    <body class="body"> 
 
     <div class="header"> 
 
      <p class="title">TheShieldNetwork</p> 
 
      <ul class="navbar"> 
 
       <li class="item"><a class="label" href="default.asp">Home</a></li> 
 
       <li class="item"><a class="label" href="news.asp">News</a></li> 
 
       <li class="item"><a class="label" href="contact.asp">Contact</a></li> 
 
       <li class="item"><a class="label" href="about.asp">About</a></li> 
 
      </ul> 
 
     </div> 
 
     <div class="main"> 
 
      <img class="hub" width="80%" height="80%" src="img/background.png" alt="Hub"> 
 
     </div> 
 
    </body> 
 
</html>

你可以看到在www.theshieldnetwork.com的網站。你有什麼想法我將如何解決它。

來源

2016-06-01 Reese Collins

這是一個圖像，我相信這個技巧只能用於圖像。 – Gusman

有沒有什麼辦法讓文字像圖片一樣？ @Gusman –

不，不存在 – Gusman

Ctrl-或+是瀏覽器放大/縮小的方式，它特別適合幫助別人..（老年人，等等..）。

瀏覽器（WebKit的）支持，直到版本：28.0.1500.11

-webkit-text-size-adjust: none; 
-webkit-text-size-adjust: 100%

但這只是現在的iOS，據我所知，因此Chrome會簡單地忽略它，並繼續使用一些所謂的支持font boosting

有一個解決方案，即使它是一個混亂的。設置最大高度大於父元素之一的元素高度似乎可以解決此問題。例如：

<div class="outer"> 
    <ul>  
     <li>This is a simple list</li> 
     <li>With list items that get scaled</li> 
     <li>How annoying!</li> 
    </ul> 
</div>

CSS：

.outer { 
     max-height: 5000em; 
    }

這似乎解決問題。儘管這並不理想。

或者你可以隨時用圖像替換你的所有文字 - 也不是很理想。

來源

2016-06-01 05:05:09

我想要文字不重新調整大小或移動css

回答

相關問題