Question

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

Answer 1

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

Answer 2

这么容易

看到这个demo

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

Answer 3

您的内联样式中存在语法错误，正确的语法是：

option {
    font-family: 'sans-serif'
}

或内联样式：

<option style="font-family: sans-serif">Font-familly Name</option>

'sans-serif'应替换为您想要的字体。

Answer 4

这就是我的代码运行方式

在头标记中插入字体

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

Answer 5

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

它不能在 Firefox 中工作 ------但它可以在 Chrome 中工作！:)

如何在选择选项的HTML标记中应用字体系列

5 个答案:

这就是我的代码运行方式