javascript - 我想更改选项标签的字体系列，但它不起作用。如果没有javascript是否可能，请解释

Question

我有这个下拉列表:

它的代码如下:

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

两种方法我都试过了，但都不行，请问有人有解决方案吗？

Answer 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;
}

1. 在您的 CSS 中使用嵌入字体。

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

1. 删除您为“选项”标签提供的内联样式。

现在应该可以了。

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