更改選擇標記中的單獨選項的css字體家庭

我不知道這是否可能，如果不是，如果有人可以拋出可選的想法，但我試圖顯示不同字體的下拉列表（特別是Google的字體目錄中的字體）放在選擇標籤中。在下拉列表中，我試圖通過設置每個選項的樣式來顯示預覽字體更改選擇標記中的單獨選項的css字體家庭

<option name="Tangerine" style="font-family:'Tangerine', verdana;">Tangerine</option>

雖然這似乎並不奏效。任何線索爲什麼或如何解決它？

來源

2011-01-12 Dandy

正進入一個類似的問題：IE9（至少），似乎當他們必然要選擇忽略`字體size`設置 - 反而會綁定到`select`本身時需要`font-size`。 – 2014-07-28 07:39:15

您不能設置<option>標籤的字體，但你可以創建具有特定樣式的列表（如你所期望的）

這是我一直在努力的一切：

$("select.js option:eq(0), ul li:eq(0)").css("fontFamily", "tangerine"); 
 
$("select.js option:eq(1), ul li:eq(1)").css("fontFamily", "tahoma"); 
 
$("select.js option:eq(2), ul li:eq(2)").css("fontFamily", "times new roman");

h1 { 
 
    font-size: 1.2em; 
 
    margin-top: 10px; 
 
    color: #777; 
 
} 
 
.tangerine { 
 
    font-family: tangerine; 
 
} 
 
.tahoma { 
 
    font-family: tahoma; 
 
} 
 
.timesnewroman { 
 
    font-family: times new roman; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script> 
 
<h1>Set with jQuery</h2> 
 
<select id="js"> 
 
    <option>Tangerine</option> 
 
    <option>Tahoma</option> 
 
    <option>Times New Roman</option> 
 
</select> 
 
<div>&nbsp;</div> 
 
<h1>Set with CSS</h2> 
 
<select id="css"> 
 
    <option class="tangerine">Tangerine</option> 
 
    <option class="tahoma">Tahoma</option> 
 
    <option class="timesnewroman">Times New Roman</option> 
 
</select> 
 
<div>&nbsp;</div> 
 
<h1>List</h2> 
 
<ul> 
 
    <li>Tangerine</li> 
 
    <li>Tahoma</li> 
 
    <li>Times New Roman</li> 
 
</ul>

來源

2011-01-12 19:16:50 hunter

你可以使用Chrome瀏覽器做這項工作嗎？ – matthewb 2013-05-01 04:54:16

在Chrome 58（在Linux上）爲CSS工作的我很棒！ – 2017-08-23 12:28:34

也許你可以使用JavaScript？你可以試試這個嗎？

<script> 
myObj = document.getElementById("tahoma"); 
myObj.style.font = "Tahoma"; 
myObj.style.color = "red"; 

// Change anything else that you like! 
</script> 

<option id="tahoma .....>

來源

2011-01-12 19:16:56 Eray

不在這裏工作：http://jsfiddle.net/95TVh/1/ – hunter 2011-01-12 19:21:38

我用一種黑客風格的方法來做到這一點。

因爲我需要對選擇標記進行樣式設置並想定製更多的東西，所以我使用了jQuery的Stylish Select插件並將font-family css屬性附加到父元素（這是一個列表標記）。

這與少量代碼工作，並與跨瀏覽器兼容。

來源

2011-01-12 20:45:23 Dandy

你應該在optgroup標籤，然後風格包裝每個option標記，如：

<select> 
 

 
    <optgroup style="font-family:arial"> 
 
    <option>Arial</option> 
 
    </optgroup> 
 

 
    <optgroup style="font-family:verdana"> 
 
    <option>veranda</option> 
 
    </optgroup> 
 

 
    <optgroup style="font-family:other"> 
 
    <option>other</option> 
 
    </optgroup> 
 

 
</select>

來源

2012-08-23 14:31:45

你可以簡單地使用這樣

<select id='lstFonts' class='form-control'> 
    <option style="font-family:Arial" value="Arial">Arial</option> 
    <option style="font-family:Verdana" value="Verdana">Arial</option> 
</select>

來源

2016-07-30 11:21:31

給字體名到期權價值。然後你可以用jquery來設置它們。

下面是一個例子：

您可以輕鬆添加新字體是這樣的：

<option value="myFontName">My Font Name</option>

$("#selectfont").each(function(){ 
 
    $(this).children("option").each(function(){ 
 
    $(this).css("fontFamily",this.value); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script> 
 
<select id="selectfont"> 
 
<option value="tangerine">Tangerine</option> 
 
<option value="tahoma">Tahoma</option> 
 
<option value="times new roman">Times New Roman</option> 
 
</select>

來源

2016-11-01 08:31:07 Nezih

didnt顯示件事上OSX的Safari正確上面提到的所有選項。我設法通過引導讓兩不誤：萬一有人

<!DOCTYPE html> 
    <html lang="nl"> 
    <head> 
    <meta charset="utf-8" /> 
    <title>font test</title> 
    <meta name="generator" content="BBEdit 10.5" /> 
    <link rel="stylesheet" type="text/css" href="yourpaththere/css/bootstrap.min.css" async /> 
    </head> 
    <body> 
    <style> 
    @font-face {font-family: edwardian;src:local("edwardian"),url('yourpathhere/font/edwardian.TTF');font-weight: normal;} 
    .edwardian{font-family: edwardian; font-size: 30px;} 

    .arial{font-family: arial;} 
    .times{font-family: times;} 
    .verdana{font-family: verdana;} 
    .helvetica{font-family: helvetica;} 
    </style> 
    <div id="fontdropdown1" class="dropdown" style="width: 300px;"> 
    <button class="btn btn-default dropdown-toggle" type="button" id="menu1" data-toggle="dropdown">Kies een lettertype 
    <span class="caret"></span></button> 
    <ul class="dropdown-menu" role="menu" aria-labelledby="menu1"> 
    <li role="presentation"><a role="menuitem" class="arial">Arial</a></li> 
    <li role="presentation" class="divider"></li> 
    <li role="presentation"><a role="menuitem" class="times">Times</a></li> 
    <li role="presentation"><a role="menuitem" class="verdana">Verdana</a></li> 
    <li role="presentation"><a role="menuitem" class="helvetica">Helvetica</a></li> 
    <li role="presentation"><a role="menuitem" class="edwardian">Edwardian</a></li> 
    </ul> 
    </div> 
    <!-- test font dropdown --> 
    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) --> 
    <script type="text/javascript" src="yourpathhere/js/jquery-1.11.3.min.js"></script> 
    <script type="text/javascript" src="yourpathhere/js/bootstrap.js"></script> 
    </body> 
    </html>

來源

2018-03-04 08:56:23

更改選擇標記中的單獨選項的css字體家庭

回答

相關問題