我想更改选项标签的字体系列，但它不起作用。如果可以，是否可以不使用javascript，请解释答案

【问题标题】：I want to change font-family of option tag but it's not working. is it possible without javascript if yes then please explain我想更改选项标签的字体系列，但它不起作用。如果可以，是否可以不使用javascript，请解释
【发布时间】：2017-08-02 10:48:45
【问题描述】：

我有这个下拉列表：

它的代码如下：

<select name="pro_cat_id[]" id="pro_cat_id[]" class="form-control" placeholder="Username">
                    <option value="-1">Select</option>

                    <option style="font-family:Shivaji01; font-size:20px;" value="1">Police Station 1</option>
                    <option style="font-family:Shivaji01; font-size:20px;" value="2">Police Station 2</option>


                                </select>

我已经编写了代码，但它不起作用。也使用内部和外部 CSS 但不起作用。

内联删除时链接 CSS：

    select > option{
    font-family:Shivaji01;
    color:red;
   font-size:20px;
   }

我尝试了两种方法但都不起作用，请问有人有解决方案吗？

【问题讨论】：

How to change font-family of drop down's list item?的可能重复
设置 select 元素的样式不是一个好主意，因为某些浏览器不支持设置样式的功能。我建议使用 JS 库，例如 jQuery UI。
你能告诉我如何用 jquery 做到这一点吗？
您不能设置下拉菜单的样式，唯一的方法是创建用自定义元素替换选择的小部件，或者使用现有的小部件，如 jQuery UI 中的小部件。
你能给我那个类型的jquery小部件的链接吗？

标签： javascript html css

【解决方案1】：

您使用的字体似乎不是标准字体，这确实意味着该字体在最终用户计算机上不可用。因此，您必须先嵌入字体，然后才能在 CSS 中使用它。

要通过 CSS 嵌入字体，请按照以下步骤操作。 1.首先下载字体的（'Shivaji01'）.eot和.ttf版本。 2. 通过在与样式表相同的目录中创建“fonts”目录，将字体添加到您的应用程序，并将 .eot 和 .ttf 文件放在字体目录中。 3. 在您的样式表中嵌入如下字体。

@font-face {
    font-family: 'Shivaji';
    src: url('fonts/Shivaji01.eot'), url('fonts/Shivaji01.ttf') format('truetype');
    font-weight: normal; //
    font-style: normal;
}

在 CSS 中使用嵌入字体。

select > option{
        font-family:'Shivaji';
        color:red;
       font-size:20px;
       }

删除您赋予“option”标签的内联样式。

现在应该可以了。

您可以从 Google 阅读有关字体嵌入的更多信息或从以下链接开始：https://www.w3schools.com/css/css3_fonts.asp

【讨论】：