选择 dropdwon 中某些字体的 optgroup 左边距

问题描述

我正在使用以下代码为字体系列选择字体。

但是某些字体选项在选择选项中从左侧获得了额外的填充。 （请看下图）

代码：

<select name="field_font" class="form-control ">
    <optgroup style="font-family:arial">
           <option value='Arial' {% if field_font== 'Arial' %} selected="selected" {% endif %}>Arial [1,2,3,4,5]</option>
    </optgroup>
    <optgroup style="font-family:Arial Narrow">
           <option value='Arial Narrow' {% if field_font== 'Arial Narrow' %} selected="selected" {% endif %}>Arial Narrow [1,5]</option>
    </optgroup>
    <optgroup style="font-family:Brush Script MT">
           <option value='Brush Script MT' {% if field_font== 'Brush Script MT' %} selected="selected" {% endif %}>Brush Script MT [1,5]</option>
    </optgroup>
    <optgroup style="font-family:Calibri">
           <option value='Calibri' {% if field_font== 'Calibri' %} selected="selected" {% endif %}>Calibri [1,5]</option>
    </optgroup>
    <optgroup style="font-family:Candara">
           <option value='Candara' {% if field_font== 'Candara' %} selected="selected" {% endif %}>Candara [1,5]</option>
    </optgroup>
    <optgroup style="font-family:Courier New">
           <option value='Courier New' {% if field_font== 'Courier New' %} selected="selected" {% endif %}>Courier New [1,5]</option>
    </optgroup>
    <optgroup style="font-family:Didot">
           <option value='Didot' {% if field_font== 'Didot' %} selected="selected" {% endif %}>Didot [1,5]</option>
    </optgroup>
    <optgroup style="font-family:Garamond">
           <option value='Garamond' {% if field_font== 'Garamond' %} selected="selected" {% endif %}>Garamond [1,5]</option>
    </optgroup>
    <optgroup style="font-family:Geneva">
           <option value='Geneva' {% if field_font== 'Geneva' %} selected="selected" {% endif %}>Geneva [1,5]</option>
    </optgroup>
    <optgroup style="font-family:Helvetica">
           <option value='Helvetica' {% if field_font== 'Helvetica' %} selected="selected" {% endif %}>Helvetica [1,5]</option>
    </optgroup>
    <optgroup style="font-family:Monaco">
           <option value='Monaco' {% if field_font== 'Monaco' %} selected="selected" {% endif %}>Monaco [1,5]</option>
    </optgroup>
    <optgroup style="font-family:Open Sans,sans-serif">
           <option value='Open Sans,sans-serif' {% if field_font== 'Open Sans,sans-serif' %} selected="selected" {% endif %}>Open Sans,sans-serif [1,5] [Opencart Default]</option>
    </optgroup>
    <optgroup style="font-family:Optima">
           <option value='Optima' {% if field_font== 'Optima' %} selected="selected" {% endif %}>Optima [1,5]</option>
    </optgroup>
    <optgroup style="font-family:Times New Roman">
           <option value='Times New Roman' {% if field_font== 'Times New Roman' %} selected="selected" {% endif %}>Times New Roman [1,5]</option>
    </optgroup>                                                 
    <optgroup style="font-family:Verdana">
           <option value='Verdana' {% if field_font== 'Verdana' %} selected="selected" {% endif %}>Verdana [1,5]</option>
    </optgroup>             
 </select>

解决方法

它按预期工作。您在那里看到的间距是因为每种字体都有不同的字母间距、行高等。

Open Sans 字体也有一些填充，但不如 Verdana 和 Courier。