在自定义跨度 jQuery Mobile 滑块标签上设置字体答案

【问题标题】：Set font on custom span jQuery Mobile slider labels在自定义跨度 jQuery Mobile 滑块标签上设置字体
【发布时间】：2012-12-14 00:35:58
【问题描述】：

您好，互联网上的好心人，

我在 jQuery Mobile 范围滑块的左侧和右侧添加一些文本内容作为标签，这工作正常，但我似乎无法让字体表现...字体不是显示正常，我似乎无法在跨度内设置/重置标签字体。

这是一个测试页面： http://www.simdock.com/amort-test/dev-scratch/amort/scratchtesting-Slider-label-font-issue.html

这是在滑块左侧和右侧放置自定义滑块标签（最小和最大滑块范围值）的 javascript 代码：

 $.fn.extend({
 sliderLabels: function(left,right) {
 var $this = $(this); 
 var $sliderdiv= $this.next("div.ui-slider[role='application']");
 //
 $sliderdiv
 .prepend('<span class="ui-slider-inner-label" style="position: absolute; left:0px; top:20px;">'+left+ '</span>')
 .append('<span class="ui-slider-inner-label" style="position: absolute; right:0px; bottom:20px;">'+right+ '</span>');     
  //   
 }
 });
 //
 $('#slider-PrincipleAmnt').sliderLabels('Min: $20', 'Max: $999');

我尝试了许多不同的迭代并尝试在跨度中显式设置字体，但是很遗憾，没有运气。

我在 jquery 论坛上的以下链接中找到了最初的代码： https://forum.jquery.com/topic/how-do-i-add-text-labels-below-slider

上面的链接也有一个jsfiddle，字体很好......所以我只是不明白我忽略了什么。 http://jsfiddle.net/cUNyr/1/

任何帮助或建议将不胜感激。

更新说明：Jack 和 Taifun 都提供了一些非常有用的提示和想法，但是，我仍然在纠结到底要修改什么以及如何修改 CSS？我也对我什至如何能够确定文本字体甚至首先有一个“阴影”感到困惑/沮丧？...这是 Firebug 中显示的 span CSS：

<span class="ui-slider-inner-label" style="position: absolute; left:0px; top:20px;">Min: $20</span>

Firebug 中没有显示“文本阴影”属性。 Soooo，嗯，我在找什么？用什么工具？ “文字阴影”从何而来？ CSS override 会是什么？

此时，odd-ball 字体是如何出现的，以及如何修复它仍然是一个谜……但我确信有一个重要的教训需要学习（禅宗的事情：重视你的错误) 下次我遇到类似的情况。再说一遍：你们会非常乐于助人的……我觉得我已经接近解决这个问题了……但唉，还没有完全解决。

【问题讨论】：

我不太确定你在问什么，但如果你指的是text-shadow，那么你可以用一些 CSS 覆盖它。
嗨，杰克，非常感谢您的反馈，因为这里有一个学习机会。对我来说仍然有点困惑的是在使用 Firebug 查看跨度之后，似乎没有任何 CSS 用于“文本阴影”？
您好，杰克，Taifun 指出的内容最有帮助，而且主题正确……我不知道滑块主题会影响滑块标签的“文本阴影”。但我仍然不确定另外两点：#1-我到底会用 CSS 覆盖和设置什么来覆盖字体？就像在 Firebug 中一样，我没有看到任何特定于文本的内容-阴影...而且我也没有太多创建 CSS 覆盖的经验和#2-为什么不在 Javascript 中明确设置文本字体以创建跨度工作？...为什么需要单独的 CSS 文件要创建吗？

标签： jquery-mobile slider jquery-ui-slider

【解决方案1】：

在您的示例中，您使用的是data-theme="b" data-track-theme="a"。删除你得到一个可读的字体。但是，如果您喜欢使用该主题，您可以覆盖 @Jack 提到的 CSS，更多信息 here。

覆盖主题

主题旨在作为一个坚实的起点，但旨在定制。由于一切都由 CSS 控制，因此很容易使用用于识别您想要的样式属性的网络检查器工具修改。

另见working example

编辑：无需创建外部自定义 CSS 文件...。您可以在 html 的头部添加此 <style> 以覆盖您的 CSS，另请参阅此 fiddle

<style>
   .ui-slider-inner-label {
     text-shadow:none;
     color:black;
     font-weight:normal;
   }
</style>

【讨论】：

注意我在 span 中添加了以下改动，它去掉了文本阴影，设置为空白和正常： text-shadow:none;颜色：黑色;字体粗细：正常
嗨 Taifun，感谢 mucho 提供的额外反馈……改变 CSS 的另一种方法是将 CSS 添加到 head 部分。很高兴有一个可靠的例子。说实话，在这一点上，CSS 对我来说似乎有点脆弱和复杂......我有点用其他人的代码示例来攻击它，没有扎实的理解......叹息：我想你得从某个地方开始.再次：谢谢。

【解决方案2】：

再次注意 Jack 和 Taifun 提供的提示最有帮助......但我终于找到了一种直接简单的方法来解决问题，直接将 text-shadow 设置为 none，然后将文本强制为黑色（就像仍然以白色显示），然后以正常字体显示（以粗体显示）。所以，虽然我没有确定到底是什么导致了阴影文本，但我确实设法至少使用内联技术将其重置为常规字体，并避免创建外部自定义 CSS 文件。

  //
  $sliderdiv
  .prepend('<span class="ui-slider-inner-label" style="position: absolute; left:0px; top:20px; text-shadow:none; color:black; font-weight:normal">'+left+ '</span>')
  .append('<span class="ui-slider-inner-label" style="position: absolute; right:0px; bottom:20px; text-shadow:none; color:black; font-weight:normal">'+right+ '</span>');      
  //

【讨论】：