如何在选择选项的 HTML 标签中应用字体系列

2024-01-09

我正在应用字体系列<select><option>标签,但它不起作用任何选项

我的代码:

<select name="t1_font" class="form-control" >
   <option style="font-family: Font-familly path');">Font-family Name</option>
</select>

我正在使用的真实代码:

      <div class="col-sm-4">
  <?php $fonts=glob(FONT_URL.'*'); //print_r($fonts); ?>
  <?php if (!empty($fonts)): $i=0;?>
  <?php foreach ($fonts as $font):
    $font_arr= explode('/',$font); $font_string =substr($font_arr[3], 0, -4);?>
    <style>
    @font-face {
       font-family: <?php echo $font_string ?>;
       src: url('<?php echo $font ?>');
    }
    </style>
    <?php $i++;
    endforeach ?>
     <?php endif ?>
     <b>Family</b><br>
    <select name="t1_font" class="form-control" >
    <?php if (!empty($fonts)): ?>
      <?php foreach ($fonts as $font): $font_arr= explode('/',$font); $font_string =substr($font_arr[3], 0, -4); ?>
          <option style="font-family: <?php echo $font_string ?>;src: url('<?php echo base_url($font) ?>');" value="<?php echo $font_arr[3] ?>" <?php if(!empty($default_data_param->text1))
          {if($font_arr[3]== $default_data_param->text1_font_file){ echo'selected';}}?> ><?php echo ucfirst($font_string) ?></option>
      <?php endforeach ?>
    <?php endif ?>
    </select>
  </div>

您的内联样式有语法错误,正确的语法是:

option {
    font-family: 'sans-serif'
}

或使用内联样式:

<option style="font-family: sans-serif">Font-familly Name</option>
  • 'sans-serif' 应该替换为您想要的字体。
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

如何在选择选项的 HTML 标签中应用字体系列 的相关文章

  • Chrome中获取伪元素内容

    我在 webkit 浏览器中通过 Javascript 获取伪元素的生成内容时遇到一些问题 关心者的上下文 我正在开发 jQuery 移动应用程序并尝试使用 FontAwesome 图标 我希望能够使用 jQM 用于其内置图标集的相同数据图
  • iOS 7 从 Mobile Safari 访问 iPhone 相机?

    In iOS 6你可以使用这样的东西
  • flex-basis 示例:内容

    我注意到在弹性盒规格 https www w3 org TR 2016 CR css flexbox 1 20160301 that flex basis可以设置为content 我正在尝试在 html 中使用它 但它在 Chrome 中不
  • HTML5 视频(webm 和 MP4)显示空白屏幕并且无法播放

    我已经用谷歌搜索了一个小时 但我要么很糟糕 要么这不是一个常见问题 这是我的视频标签
  • 当flex-wrap是wrap的时候,flex-shrink还有用吗?

    我不认为flex shrink and flex wrap wrap 在一起有意义 但我想知道我是否遗漏了一些东西 container background DDD width 300px height 100px padding 20px
  • 通过jquery在日期框中自动添加斜杠/符号[重复]

    这个问题在这里已经有答案了 我发现几个问题但没有答案 所以我问问题 如何添加自动斜杠 符号
  • 欺骗或禁用页面可见性 API

    页面可见性 API https developer mozilla org en US docs Web Guide User experience Using the Page Visibility API开始普遍用于在选项卡未处于焦点时
  • 重命名从 HTML5 画布创建的图像

    我制作了一个简单的画布并将其另存为图像 我在这段代码的帮助下做到了这一点 var canvas document getElementById mycanvas var img canvas toDataURL image png 并弹出创
  • 从提交的表单中获取值

    我有一个非常简单的表格
  • 处理重叠 SVG 图层中的鼠标事件

    我正在使用 d3 js 构建地图可视化 我正在为美国各州和县绘制填充多边形 县的 SVG 图层位于州图层下方 状态已填充 但填充不透明度设置为 0 我认为 需要填充来捕获点击事件 我想捕获州级的点击事件 但我想捕获县级的鼠标悬停事件 但是
  • HTML 5 视频:使用 javascript 播放多个“剪辑”

    我在 HTML 视频和 JavaScript 方面遇到问题 因此编写了一些简单的代码来演示 有一个视频包含三个 剪辑 全长五秒 显然 在现实世界中 它们要长得多 一个在 25 30 秒 一个在 55 60 秒 最后一个在 85 90 秒 我
  • 确定是否单击了 Google Chrome 打印预览中的打印/取消按钮

    我一直在使用下面的代码打印我的页面 window print 下图是 Google Chrome 浏览器中的打印预览的样子 它有两个主要按钮 print and cancel 我想知道用户是否点击了print or cancel纽扣 我所做
  • 单击

    Closed 这个问题需要多问focused help closed questions 目前不接受答案 我知道如何用 jquery 做到这一点 但我被 React 困住了 每当用户点击 div 时 我如何聚焦输入字段 你需要有一个onCl
  • 是否可以使用 JavaScript 导入 HTML?

    我有一些具有相同页脚的 html 页面 使用 JavaScript 并且仅使用 JavaScript 我可以在其中导入另一个 html 页面吗 下面介绍了如何仅使用 JavaScript 向页面添加页脚 2022 代码 使用fetch ht
  • 从 ASP.NET Web API 返回 HTML

    如何从 ASP NET MVC Web API 控制器返回 HTML 我尝试了下面的代码 但由于未定义 Response Write 而出现编译错误 public class MyController ApiController HttpP
  • Smalltalk Pharo ZdcSecureSMTPClient 在 GMail 中未显示 html 格式?

    我正在使用 ZdcSecureSMTPClient 将 html 格式的字符串发送到 gmail 帐户 但是当我发送它时 它会将 html 编码显示为纯文本 IE mailMessage MailMessage empty mailMess
  • 创建具有可变宽度
    的定义列表(包括 JSFiddle)

    我有一个定义列表 其中术语和定义的宽度都不同 编辑 为了澄清 当我说变化宽度时 我的意思是它们不能是固定宽度 显然 通过设置 的宽度就可以轻松实现这种效果我需要每一对并排坐着 如果需要的话可以变成多行 而不是包裹在 这是一个 JSFiddl
  • 更改滚动条样式

    我们可以更改滚动条样式吗 我想在其上放置图像 而不是默认滚动条 No IE 允许更改某些滚动条元素的颜色 但其他浏览器 不 唯一的解决方案是使用自定义 JS 来实现这一点 但这总是比本机控件更丑陋和无用 看一眼 http www kelvi
  • Angular 2:将路由器出口设计为宽度 < 100%

    我正在构建一个 Angular 2 应用程序 该应用程序将为宽度超过 500 的屏幕提供侧导航栏 为宽度小于 500 的屏幕提供底部导航栏 现在 我尝试为侧栏分配 20 的宽度 即 80 应用内容 我遇到的问题是路由器出口内容 即实际的应用
  • jQuery - 将日期选择器的容器设置为特定的 div

    我在 div 上使用 jQuery UI 日期选择器 div通过移动鼠标隐藏和显示 因为日期选择器存在于末尾标签 不在我的 div 内 当我将鼠标移动到日期选择器时 div 消失 我像这样加载了日期选择器 JavaScript dt1 da

随机推荐