定制跨度jQuery Mobile的滑块标签设置字体(Set font on custom span

你好互联网的那种人，

我在前面加上并在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/

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

更新注：两个杰克和TAIFUN提供了一些非常有用的技巧和想法，但是，我仍然什么，究竟如何在CSS改变挣扎？？我也不解/沮丧我会如何甚至能够确定文本的字体，甚至有摆在首位“影子” ......这里的跨度CSS如图萤火虫：

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

有证据显示在Firebug起来没有“文字阴影”属性。 SOOOO，hmmmmm，我该怎么找？并用什么工具？哪里是“文字阴影”来自哪里？什么会的CSS过程呢？

在这一点上，奇数球字体的显示方式，以及如何解决它仍然是一个有点神秘的...但我敢肯定有一个重要的教训要学习（禅宗的东西：珍惜你的错误）的下一次我碰到了类似的情况。还是那句话：你们大家已经非常有帮助......我觉得我接近有这个想通了......但很可惜，还没有应用。

Answer 1:

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

重要的主题
该主题旨在为坚实的起点，但是是为了进行定制。因为一切都是由CSS控制，可以很容易地使用网络检查工具，以确定要修改的样式属性。

又见工作示例

编辑：有没有必要建立一个外部的自定义CSS文件....您可以添加此<style>在HTML头重写你的CSS，又见这个小提琴

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

Answer 2:

再次注意杰克和TAIFUN提供的线索是最有帮助的，我竟然最终找到一个直接简单的方式通过直接设置文字阴影无法比拟的，然后迫使文字为黑色，以解决该问题（如仍显示在白），然后以正常字体（如在粗体显示）。所以，虽然我没有确定究竟是诱导阴影的文字，我还是设法使用内联技术，它至少恢复到常规字体，并避免不必创建一个自定义的外部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>');      
  //

文章来源: Set font on custom span jQuery Mobile slider labels