如何在HTML选择选项标签中应用字体族?

4

我正在<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>

这是自定义字体吗?如果是,你使用了字体面吗? - hamidfzm
<select name=""> <option style="font-family: 字体路径;">字体名称</option> </select> - Anand Jain
你要将所选字体设置为你的选择吗? - Mohammad Kermani
是的,我想在我的选项文本上应用我的字体系列,您可以在http://examine247.com/test.php上查看我的输出。 - Anand Jain
7个回答

2
您的内联样式存在语法错误,正确的语法应该是:
option {
    font-family: 'sans-serif'
}

或者使用内联样式:

<option style="font-family: sans-serif">Font-familly Name</option>
  • 应该将'sans-serif'替换为您想要的字体。

我正在使用相同的代码 <select name="t1_font" class="form-control"> <option style="font-family: 字体路径;">字体名称</option> </select> - Anand Jain
@user3616586 属性没问题,但是“Font-family path”不是一个有效的字体。 - ianaya89
<optgroup style="font-family: Aachen_Std_Bold;src: url('http://examine247.com/ssa/assets/fonts/Aachen_Std_Bold.ttf&#39;);"> <option style="font-family: Aachen_Std_Bold;src: url('http://examine247.com/ssa/assets/fonts/Aachen_Std_Bold.ttf&#39;);" value="Aachen_Std_Bold.ttf">Aachen_Std_Bold</option> </optgroup> - Anand Jain

0
尝试这个:(适用于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>

enter image description here


0

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


0

-1
#select-group{
font-family: 'samim'!important;}

它在火狐浏览器中无法工作——但是在谷歌浏览器中可以!:)


1
这个回答不是很完整。你能否添加一些更多的信息呢?例如,ID选择组是从哪里来的?这个答案与@mohammad-kermani的答案有什么不同之处? - Brook Jordan

-2

这是我的代码运行方式

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

@user3616586,请看我的更新答案。希望它能有所帮助。 - Mohamed-Yousef

-4

更新:看起来这个解决方案不再可行了!请查看答案链接


演示

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


2
这不会改变<option>元素的字体,只会修改其父级的<select>元素,在Firefox浏览器中至少如此。 - Flimm
1
那么在Mozilla浏览器中的方法是什么? - parastoo

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接