Thay đổi phông chữ-gia đình cho các tùy chọn riêng biệt trong thẻ chọn

Tôi không biết điều này là có thể, và nếu không, nếu ai đó có thể ném ra các ý tưởng tùy chọn, nhưng tôi đang cố gắng hiển thị thả xuống các phông chữ khác nhau (cụ thể, phông chữ từ thư mục phông chữ của Google) trong một thẻ được chọn. Trong trình đơn thả xuống, tôi đang cố gắng hiển thị bản xem trước bằng cách tạo kiểu cho mỗi tùy chọn bằng phông chữ mà nó đại diện choThay đổi phông chữ-gia đình cho các tùy chọn riêng biệt trong thẻ chọn

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

Điều này dường như không hoạt động. Bất kỳ manh mối nào tại sao hay cách khắc phục nó?

Nguồn

2011-01-12 Dandy

trong trường hợp ai đó đang gặp sự cố tương tự: IE9 (ít nhất) dường như bỏ qua cài đặt 'font-size' khi chúng được gắn với tùy chọn - nhưng sẽ lấy 'font-size' khi liên kết với chính' select'. –

Bạn không thể đặt phông chữ của thẻ <option> nhưng bạn có thể tạo một danh sách với phong cách cụ thể (như bạn mong đợi)

Dưới đây là tất cả những gì tôi đã cố gắng:

$("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>

Nguồn

2011-01-12 19:16:50 hunter

bạn có thể thực hiện công việc này trong trình duyệt chrome không? – matthewb

CSS của một người làm việc cho tôi trong Chrome 58 (trên Linux), tốt đẹp! –

Có thể bạn có thể sử dụng javascript? Bạn có thể thử cái này không?

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

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

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

Nguồn

2011-01-12 19:16:56 Eray

không hoạt động tại đây: http://jsfiddle.net/95TVh/1/ – hunter

trình duyệt nào bạn đang sử dụng? Tôi đang sử dụng Firefox và nó hoạt động. – Eray

FF nhận dạng phông chữ trên các tùy chọn nhưng hầu hết các trình duyệt không phải là – hunter

Tôi đã sử dụng phương pháp kiểu tấn công để thực hiện.

Vì tôi cần tạo kiểu cho thẻ được chọn và muốn tùy chỉnh thêm một vài thứ, tôi đã sử dụng plugin Chọn phong cách cho jQuery và đính kèm thuộc tính css phông chữ cho phần tử gốc (thẻ danh sách).

Làm việc với mã nhỏ và tương thích với nhiều trình duyệt.

Nguồn

2011-01-12 20:45:23 Dandy

Bạn nên quấn mỗi thẻ option trong một phong cách optgroup thẻ và sau đó như:

<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>

Nguồn

2012-08-23 14:31:45

mà không Công việc này: ( – ppumkin

Làm việc cho tôi. Tuyệt vời !! –

Tác phẩm này, nhưng có cách nào để loại bỏ khoảng cách giữa các tùy chọn hay không, và quan trọng hơn là thụt lề trên tùy chọn thứ hai đến cuối cùng (dường như luôn là giây để cuối)? – Goose

Bạn chỉ có thể sử dụng như thế này

<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>

Nguồn

2016-07-30 11:21:31

Cho biết tên font chữ để giá trị tùy chọn. Sau đó, bạn có thể đặt tất cả với jquery.

Dưới đây là một ví dụ:

Bạn có thể thêm font mới một cách dễ dàng như thế này:

<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>

Nguồn

2016-11-01 08:31:07 Nezih

Tất cả các tùy chọn nêu trên didnt điều hiển thị chính xác trên OSX Safari. Tôi đã quản lý để có được những điều chính xác bằng cách sử dụng bootstrap:

<!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>

Nguồn

2018-03-04 08:56:23

Thay đổi phông chữ-gia đình cho các tùy chọn riêng biệt trong thẻ chọn

Trả lời

Các vấn đề liên quan