[英]How to apply font family in HTML tag of select option
我在<select><option>
标签中应用了字体系列,但它对任何选项都不起作用
我的代码:
<select name="t1_font" class="form-control" >
<option style="font-family: Font-familly path');">Font-family Name</option>
</select>
我正在使用的真实代码:
<div class="col-sm-4">
<?php $fonts=glob(FONT_URL.'*'); //print_r($fonts); ?>
<?php if (!empty($fonts)): $i=0;?>
<?php foreach ($fonts as $font):
$font_arr= explode('/',$font); $font_string =substr($font_arr[3], 0, -4);?>
<style>
@font-face {
font-family: <?php echo $font_string ?>;
src: url('<?php echo $font ?>');
}
</style>
<?php $i++;
endforeach ?>
<?php endif ?>
<b>Family</b><br>
<select name="t1_font" class="form-control" >
<?php if (!empty($fonts)): ?>
<?php foreach ($fonts as $font): $font_arr= explode('/',$font); $font_string =substr($font_arr[3], 0, -4); ?>
<option style="font-family: <?php echo $font_string ?>;src: url('<?php echo base_url($font) ?>');" value="<?php echo $font_arr[3] ?>" <?php if(!empty($default_data_param->text1))
{if($font_arr[3]== $default_data_param->text1_font_file){ echo'selected';}}?> ><?php echo ucfirst($font_string) ?></option>
<?php endforeach ?>
<?php endif ?>
</select>
</div>
<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> </selecct>
太简单
看看这个演示
#select1 { font-family: 'sans-serif'; } #select2 { font-family: tahoma; } #select3 { font-family: monospace; }
<select id="select1"> <option>OPTION 1</option> <option>OPTION 2</option> <option>OPTION 3</option> </select> <br/> <select id="select2"> <option>OPTION 1</option> <option>OPTION 2</option> <option>OPTION 3</option> </select> <br/> <select id="select3"> <option>OPTION 1</option> <option>OPTION 2</option> <option>OPTION 3</option> </select>
您的内联样式中存在语法错误,正确的语法是:
option {
font-family: 'sans-serif'
}
或内联样式:
<option style="font-family: sans-serif">Font-familly Name</option>
在head标签中插入字体
/* BAHAMAS */
@font-face {font-family: 'BAHAMAS'; src: url('../fonts/BAHAMAS0.eot');}
@font-face {font-family: 'BAHAMAS'; src: url(//:) format('no404'), url('../fonts/BAHAMAS0.ttf') format('truetype'); font-weight: normal; font-style: normal;}
调用字体
<option style="font-family:BAHAMAS;">My Font</option>
试试这个:(适用于 Bootstrap 5)
<div class="">
<label for="fontFamilySelect" class="form-label">Font Family</label>
<select class="form-select" id="fontFamilySelect" onchange="updateFontFamily()">
<option value="">Select</option>
<option disabled style="font-weight: bold; background-color: #EEEEEE">Serif Fonts</option>
<option value="Georgia,serif" style="font-family: Georgia,serif">Georgia</option>
<option value="Palatino Linotype,Book Antiqua,Palatino,serif" style="font-family: Palatino Linotype,Book Antiqua,Palatino,serif">Palatino Linotype</option>
<option value="Times New Roman,Times,serif" style="font-family: Times New Roman,Times,serif">Times New Roman</option>
<option disabled style="font-weight: bold; background-color: #EEEEEE">Sans-Serif Fonts</option>
<option value="Arial,Helvetica,sans-serif" style="font-family: Arial,Helvetica,sans-serif">Arial</option>
<option value="Arial Black,Gadget,sans-serif" style="font-family: Arial Black,Gadget,sans-serif">Arial Black</option>
<option value="Comic Sans MS,cursive,sans-serif" style="font-family: Comic Sans MS,cursive,sans-serif">Comic Sans MS</option>
<option value="Impact,Charcoal,sans-serif" style="font-family: Impact,Charcoal,sans-serif">Impact</option>
<option value="Lucida Sans Unicode,Lucida Grande,sans-serif" style="font-family: Lucida Sans Unicode,Lucida Grande,sans-serif">Lucida Sans Unicode</option>
<option selected="selected" value="Tahoma,Geneva,sans-serif" style="font-family: Tahoma,Geneva,sans-serif">Tahoma</option>
<option value="Trebuchet MS,Helvetica,sans-serif" style="font-family: Trebuchet MS,Helvetica,sans-serif">Trebuchet MS</option>
<option value="Verdana,Geneva,sans-serif" style="font-family: Verdana,Geneva,sans-serif">Verdana</option>
<option disabled style="font-weight: bold; background-color: #EEEEEE">Monospace Fonts</option>
<option value="Courier New,Courier,monospace" style="font-family: Courier New,Courier,monospace">Courier New</option>
<option value="Lucida Console,Monaco,monospace" style="font-family: Lucida Console,Monaco,monospace">Lucida Console</option>
</select>
</div>
#select-group{
font-family: 'samim'!important;}
它不能在 firefox 中工作 ------ 但它可以在 Chrome 中工作::)
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.