选择下拉列表中某些字体的 optgroup 左边距

Question

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

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

代码：

<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,2,3,4,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,2,3,4,5]</option>
    </optgroup>
    <optgroup style="font-family:Calibri">
           <option value='Calibri' {% if field_font== 'Calibri' %} selected="selected" {% endif %}>Calibri [1,2,3,4,5]</option>
    </optgroup>
    <optgroup style="font-family:Candara">
           <option value='Candara' {% if field_font== 'Candara' %} selected="selected" {% endif %}>Candara [1,2,3,4,5]</option>
    </optgroup>
    <optgroup style="font-family:Courier New">
           <option value='Courier New' {% if field_font== 'Courier New' %} selected="selected" {% endif %}>Courier New [1,2,3,4,5]</option>
    </optgroup>
    <optgroup style="font-family:Didot">
           <option value='Didot' {% if field_font== 'Didot' %} selected="selected" {% endif %}>Didot [1,2,3,4,5]</option>
    </optgroup>
    <optgroup style="font-family:Garamond">
           <option value='Garamond' {% if field_font== 'Garamond' %} selected="selected" {% endif %}>Garamond [1,2,3,4,5]</option>
    </optgroup>
    <optgroup style="font-family:Geneva">
           <option value='Geneva' {% if field_font== 'Geneva' %} selected="selected" {% endif %}>Geneva [1,2,3,4,5]</option>
    </optgroup>
    <optgroup style="font-family:Helvetica">
           <option value='Helvetica' {% if field_font== 'Helvetica' %} selected="selected" {% endif %}>Helvetica [1,2,3,4,5]</option>
    </optgroup>
    <optgroup style="font-family:Monaco">
           <option value='Monaco' {% if field_font== 'Monaco' %} selected="selected" {% endif %}>Monaco [1,2,3,4,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,2,3,4,5] [Opencart Default]</option>
    </optgroup>
    <optgroup style="font-family:Optima">
           <option value='Optima' {% if field_font== 'Optima' %} selected="selected" {% endif %}>Optima [1,2,3,4,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,2,3,4,5]</option>
    </optgroup>                                                 
    <optgroup style="font-family:Verdana">
           <option value='Verdana' {% if field_font== 'Verdana' %} selected="selected" {% endif %}>Verdana [1,2,3,4,5]</option>
    </optgroup>             
 </select>

Answer 1

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

Open Sans 字体也有一点填充，但没有 Verdana 和 Courier 那么多。