如何更改列表的字体大小(不是初始视图)

Question

我为下拉列表的初始视图设置了自定义字体和背景(选择一个选项).它font-size是20像素,使用自定义字体看起来很棒.但是,当我点击列表时,选项本身不使用自定义字体,看起来正常,除了font-size,似乎继续.这似乎只是Chrome的情况(我也测试了Safari和Firefox).

@font-face {
    font-family: 'Averia Libre';
    font-style: normal;
    font-weight: 400;
    src: local('Averia Libre Regular'), local('AveriaLibre-Regular'),
    url('http://themes.googleusercontent.com/static/fonts/averialibre/v1/rYVgHZZQICWnhjguGsBspHhCUOGz7vYGh680lGh-uXM.woff') format('woff');
}
select {
    font-size: 20px;
    font-family: 'Averia Libre', cursive;
    background: url(http://www.greenriverworks.com/elements/borders/green_button_background_over.jpg) repeat-x;
    width: 400px;
    font-family: 'Averia Libre';
}

<link href='http://fonts.googleapis.com/css?family=Averia+Libre' rel='stylesheet' type='text/css'>
<select>
    <option value="">I'm a custom font.</option>
    <option value="">Hey me too!</option>
    <option value="">Averia Libre</option>
</select>

我尝试为选项本身创建一个单独的类,但这似乎没有任何影响.

为了进一步说明,这里是一个JSFiddle.

铬:

火狐:

Answer 1

我同意彼得,但是使用:

select {
  font-size: 20px;
  font-family: 'Averia Libre', cursive;
}

在CSS上将更改所有下拉字体,所以他应该使用类而不是总选择

CSS

.selectClass {
   font-size: 25px;
   font-family: 'Impact', cursive;
}?

和HTML

<link href='http://fonts.googleapis.com/css?family=Averia+Libre' rel='stylesheet' type='text/css'>

<select class="selectClass">
<option value="">I'm a custom font.</option>
<option value="">Hey me too!</option>
<option value="">Averia Libre</option>
</select>?

或者您可以直接在http://jsfiddle.net/sNkDW/上看到小提琴

Answer 2

我已经在 Chrome 上成功完成了此操作。这是一个由 Google Fonts 提供的自定义字体的示例。

\n\n

小提琴： http: //jsfiddle.net/simple/wpHKe/

\n\n

HTML代码，如您的：

\n\n

<select>\n<option value="">I\'m a custom font.</option>\n<option value="">Hey me too!</option>\n<option value="">Averia Libre</option>\n</select>\xe2\x80\x8b\n

\n\n

当然，CSS：

\n\n

select {\n    font-size: 20px;\n    font-family: \'Averia Libre\', cursive;\n}\xe2\x80\x8b\n

\n\n

还有来自 Google 的 Font Face：

\n\n

您可以看到这个作为外部样式表链接，但这是其中的代码。

\n\n

@font-face {\n  font-family: \'Averia Libre\';\n  font-style: normal;\n  font-weight: 400;\n  src: local(\'Averia Libre Regular\'), local(\'AveriaLibre-Regular\'),\n  url(\'http://themes.googleusercontent.com/static/fonts/averialibre/v1/rYVgHZZQICWnhjguGsBspHhCUOGz7vYGh680lGh-uXM.woff\') format(\'woff\');\n}\n

\n\n

编辑：

\n\n

正如@Jhilom所指出的，如果您不希望这影响您网站上的所有 DropdDown，请务必在 Select 中包含 CSS 类，如下所示：

\n\n

HTML：

\n\n

<select class="yourSelectClass">\n<option>1</option>\n<option>2</option>\n<option>3</option>\n</select>\n

\n\n

CSS：

\n\n

.yourSelectClass\n{\n/* Your Dropdown CSS here */\n}\n

\n