Question

你好，互联网的人，

我正在前面添加一些文本内容作为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的内容和方式？我也很困惑/沮丧我甚至可以在文本字体中确定甚至首先有一个'阴影'？...这里是跨越CSS，如Firebug所示：

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

Firebug中没有显示“文字阴影”属性。 Soooo，嗯，我该找什么？用什么工具？ '文字阴影'来自哪里？ CSS覆盖会是什么？

此时，奇球字体是如何出现的，以及如何修复它仍然有点神秘......但我确信有一个重要的教训需要学习（禅宗的东西：重视你的错误）下次我遇到类似的情况。再说一次：你会非常乐于助人......而且我觉得我已经接近了这个......但是唉，还没到那里。

Answer 1

在您的示例中

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

覆盖主题

主题是一个坚实的起点，但意味着   定制。由于一切都是由CSS控制的，因此很容易使用   Web检查器工具，用于标识所需的样式属性   修改

另见working example

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

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

Answer 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>');      
  //

在自定义范围jQuery Mobile滑块标签上设置字体

2 个答案: