Fatal编程技术网
  • html/
  • Html 更改“选择标记”中单独选项的css字体系列

Html 更改“选择标记”中单独选项的css字体系列

html css fonts

Html 更改“选择标记”中单独选项的css字体系列,html,css,fonts,google-webfonts,Html,Css,Fonts,Google Webfonts,我不知道这是否可能，如果不可能，是否有人可以抛出可选的想法，但我正试图显示不同字体的下拉列表，具体来说，字体是从谷歌的字体目录中选择标签。在下拉列表中，我试图通过使用每个选项所代表的字体设置其样式来显示预览 <option name="Tangerine" style="font-family:'Tangerine', verdana;">Tangerine</option> 不过，这似乎不起作用。有什么线索可以解释为什么或者如何修复它吗？您不能设置标签的字体，但可以创

我不知道这是否可能，如果不可能，是否有人可以抛出可选的想法，但我正试图显示不同字体的下拉列表，具体来说，字体是从谷歌的字体目录中选择标签。在下拉列表中，我试图通过使用每个选项所代表的字体设置其样式来显示预览

<option name="Tangerine" style="font-family:'Tangerine', verdana;">Tangerine</option>
不过，这似乎不起作用。有什么线索可以解释为什么或者如何修复它吗？

您不能设置标签的字体，但可以创建一个带有特定样式的列表，正如您所期望的那样

以下是我一直在尝试的一切：

$select.js选项：eq0，ul-li:eq0.cssfontFamily，tangerine； $select.js选项：eq1，ul li:eq1.cssfontFamily，tahoma； $select.js选项：eq2，ul li:eq2.cssfontFamily，times new roman； h1{ 字体大小：1.2米； 边缘顶部：10px； 颜色：777； } 橘子先生{ 字体系列：橘黄色； } 塔荷马夫人{ 字体系列：tahoma； } 泰晤士报{ 字体系列：时代新罗马； } 使用jQuery设置 橘 塔荷马 新罗马时代 用CSS设置 橘 塔荷马 新罗马时代 列表 橘 塔荷马 新罗马时代
也许你可以使用javascript？你能试试这个吗

<script>
myObj = document.getElementById("tahoma");
myObj.style.font = "Tahoma";
myObj.style.color = "red";

// Change anything else that you like!
</script>

<option id="tahoma .....>
我用了一种粗俗的方法

因为我需要设置select标记的样式，并且想要定制更多的东西，所以我使用了用于jQuery的时髦select插件，并将font-family-css属性附加到作为列表标记的父元素

这只需要很少的代码，并且跨浏览器兼容。

您应该将每个选项标记包装在一个optgroup标记中，然后将其样式设置为：

Arial 阳台 另外
你可以这样简单地使用

<select id='lstFonts' class='form-control'>
    <option style="font-family:Arial" value="Arial">Arial</option>
    <option style="font-family:Verdana" value="Verdana">Arial</option>
</select>
为选项值指定字体名称。然后，您可以使用jquery对它们进行设置

以下是一个例子：

您可以像这样轻松添加新字体：

<option value="myFontName">My Font Name</option>
橘 塔荷马 新罗马时代
上面提到的所有选项在OSX Safari上的显示都不正确。通过使用引导程序，我成功地纠正了问题：

<!DOCTYPE html>
    <html lang="nl">
    <head>
    <meta charset="utf-8" />
    <title>font test</title>
    <meta name="generator" content="BBEdit 10.5" />
    <link rel="stylesheet" type="text/css" href="yourpaththere/css/bootstrap.min.css" async />
    </head>
    <body>
    <style>
    @font-face {font-family: edwardian;src:local("edwardian"),url('yourpathhere/font/edwardian.TTF');font-weight: normal;}
    .edwardian{font-family: edwardian; font-size: 30px;}

    .arial{font-family: arial;}
    .times{font-family: times;}
    .verdana{font-family: verdana;}
    .helvetica{font-family: helvetica;}
    </style>
    <div id="fontdropdown1" class="dropdown" style="width: 300px;">
    <button class="btn btn-default dropdown-toggle" type="button" id="menu1" data-toggle="dropdown">Kies een lettertype
    <span class="caret"></span></button>
    <ul class="dropdown-menu" role="menu" aria-labelledby="menu1">
    <li role="presentation"><a role="menuitem" class="arial">Arial</a></li>
    <li role="presentation" class="divider"></li>
    <li role="presentation"><a role="menuitem" class="times">Times</a></li>
    <li role="presentation"><a role="menuitem" class="verdana">Verdana</a></li>
    <li role="presentation"><a role="menuitem" class="helvetica">Helvetica</a></li>
    <li role="presentation"><a role="menuitem" class="edwardian">Edwardian</a></li>
    </ul>
    </div>
    <!-- test font dropdown -->
    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) --> 
    <script type="text/javascript" src="yourpathhere/js/jquery-1.11.3.min.js"></script>
    <script type="text/javascript" src="yourpathhere/js/bootstrap.js"></script>
    </body>
    </html>
您使用的浏览器是什么？我使用的是Firefox，它可以工作。FF可以识别选项上的字体，但大多数浏览器不能识别，这不是跨浏览器解决方案：请参阅我更新的JSFIDLE:FF可以识别选项上的CSS类，但不能识别选项上的字体族，因为您正在使用，但在JS代码中您正在使用select.JS。您必须使用selectjs。如果有人遇到类似的问题：IE9在绑定到选项时似乎至少忽略了字体大小设置，但在绑定到select本身时会采用字体大小。对我来说很有用。令人惊叹的这是可行的，但有没有办法消除选项之间的差距，更重要的是，倒数第二个选项上的缩进似乎总是倒数第二个？在Linux上的Chrome 58中，CSS一个对我有用，很好！