如何使用 jQuery 动态切换文本字体（font-family）

本文介绍如何通过 jquery 监听下拉菜单的字体选择事件，并实时将选中的 font-family 应用到目标文本元素上，实现无刷新字体预览功能。

在网页开发中，动态切换字体是富文本编辑器、在线设计工具或个性化设置页面的常见需求。借助 jQuery，我们可以轻松实现“选择即生效”的交互体验：用户从下拉列表中选取一种字体，目标

核心实现仅需一行关键代码：

$('#font_families').on('change', function() {
  $('#test_text').css('font-family', $(this).val());
});

这段代码监听 #font_families 下拉框的 change 事件，当用户选择新选项时，获取其 value（即字体名称），并通过 .css() 方法将 font-family 样式直接应用到 #test_text 元素上。

✅ 完整可运行示例

确保引入 jQuery（推荐使用 CDN）并按顺序放置 HTML 结构：

  Test Text



  Select a font
  Arial
  Georgia
  Times New Roman
  Courier New
  Consolas
  Segoe UI
  Optima
  Garamond
  

? 提示：实际项目中建议对长列表做分类/搜索优化，避免影响性能与用户体验；此处保留完整字体列表供参考，但生产环境应根据目标平台支持情况精简常用字体。

⚠️ 注意事项与最佳实践

• 字体名称中的空格与引号：CSS 中含空格的字体名（如 "Comic Sans MS"）需用英文双引号包裹。jQuery .css() 方法会自动处理引号添加——你只需传入原始字符串（如 'Comic Sans MS'），jQuery 内部会将其转为 "Comic Sans MS" 输出至 CSS，无需手动加引号。

• 字体可用性保障：浏览器仅能渲染用户系统中已安装或通过 @font-face 加载的字体。若所选字体不可用，浏览器将回退至 font-family 列表中的下一个字体（或默认字体）。建议在 value 中提供合理的通用字体族作为兜底，例如：

  Helvetica (fallback)

• 性能与可访问性：避免在 change 回调中执行复杂 DOM 操作；确保 元素具有明确的 label（可用 Font: 提升无障碍体验）。

• 扩展建议：如需同步更新多个元素，可使用类选择器：

  $('.editable-text').css('font-family', $(this).val());

✅ 总结

通过 $(selector).on('change', ...) 绑定事件 + .css('font-family', value) 动态赋值，即可零成本实现字体实时切换。该方案简洁、兼容性好（支

# 将其  # 这段  # 加载  # 多个  # google  # 英文  # 我们可以  # 只需  # 推荐使用  # 可用性  # 列表中  # 浏览器  # css  # 选择器  # 工具  # js  # go  # html  # 字符串  # 事件  # 前端  # select  # for  # dom  # cdn  # jquery 

相关栏目： <？ｍｕｍａ $count = M('archives')->where(['typeid'=>$field['id']])->count(); ?> 【 AI推广<？ｍｕｍａ echo $count; ?> 】 <？ｍｕｍａ $count = M('archives')->where(['typeid'=>$field['id']])->count(); ?> 【 SEO优化<？ｍｕｍａ echo $count; ?> 】 <？ｍｕｍａ $count = M('archives')->where(['typeid'=>$field['id']])->count(); ?> 【 技术百科<？ｍｕｍａ echo $count; ?> 】 <？ｍｕｍａ $count = M('archives')->where(['typeid'=>$field['id']])->count(); ?> 【 谷歌推广<？ｍｕｍａ echo $count; ?> 】 <？ｍｕｍａ $count = M('archives')->where(['typeid'=>$field['id']])->count(); ?> 【 百度推广<？ｍｕｍａ echo $count; ?> 】 <？ｍｕｍａ $count = M('archives')->where(['typeid'=>$field['id']])->count(); ?> 【 网络营销<？ｍｕｍａ echo $count; ?> 】 <？ｍｕｍａ $count = M('archives')->where(['typeid'=>$field['id']])->count(); ?> 【 案例网站<？ｍｕｍａ echo $count; ?> 】 <？ｍｕｍａ $count = M('archives')->where(['typeid'=>$field['id']])->count(); ?> 【 精选文章<？ｍｕｍａ echo $count; ?> 】