Jquery mobile 在自定义span jQuery移动滑块标签上设置字体

你好，互联网上善良的人们

我在jQuery Mobile range滑块的左右两侧预先添加了一些文本内容作为标签，它工作正常，但我似乎无法使字体正常工作……字体显示不正确，而且我似乎也无法在范围内设置/重置标签字体

这是一个测试页面：

下面是将自定义滑块标签（最小和最大滑块范围值）放在滑块左侧和右侧的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');

$.fn.extend({
滑块标签：函数（左、右）{
var$this=$（this）；
var$sliderdiv=$this.next（“div.ui-slider[role='application']）；
//
$sliderdiv
.前置（“”+左+“”）
.附加（“”+右+“”）；
//   
}
});
//
$（“#slider PrincipleAmnt”）。滑块标签（'Min:$20'，'Max:$999'）；

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

我在jquery论坛的以下链接中找到了最初发布的代码：

上面的链接也有一个JSFIDLE，字体很好…所以我不明白我忽略了什么。

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

更新说明：Jack和Taifun都提供了一些非常有用的提示和想法，但是，我仍然在为CSS上到底要修改什么以及如何修改而苦苦挣扎？我还感到困惑/沮丧的是，我如何才能确定文本字体中是否有“阴影”？…以下是Firebug中显示的span CSS：

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

Min:$20

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

---

在这一点上，奇怪的球字体是如何出现的，以及如何修复它仍然是一个谜…但我相信有一个重要的教训要吸取（禅宗的事情：重视你的错误）为下一次我遇到类似的情况。再说一遍：你会帮上大忙的……我觉得我很快就能解决这个问题了……但是，唉，还没有完全解决。

在您的示例中，您使用的是

data-theme=“b”data-track-theme=“a”

。删除后，您将获得可读的字体。然而，如果你想使用这个主题，你可以覆盖CSS，如@Jack所提到的，更多信息

覆盖主题

这些主题是作为一个坚实的起点，但也意味着 定制的。因为一切都是由CSS控制的，所以使用 web inspector工具，用于标识要修改的样式特性 修改

另请参见

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

编辑：无需创建外部自定义CSS文件。。。。您可以在html的头部添加此

，以覆盖CSS，另请参见此

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

.ui滑块内部标签{
文本阴影：无；
颜色：黑色；
字体大小：正常；
}

再次注意，Jack和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>');      
  // 

//
$sliderdiv
.前置（“”+左+“”）
.附加（“”+右+“”）；
// 

我不确定你问的是什么，但是如果你提到的是

文本阴影

，那么你可以用一些CSS覆盖它。嗨，杰克，非常感谢你的反馈，因为这里有学习机会。对我来说仍然有点困惑的是，在使用Firebug查看跨度后，似乎没有任何CSS只用于“文本阴影”？嗨，杰克，Taifun指出的是最有用的，关于主题是正确的…我不知道滑块主题会影响滑块标签的“文本阴影”。但我仍然不确定还有两点：#1-我到底要做什么，用CSS来覆盖字体？，同样在Firebug中，我没有看到任何特定于文本阴影的内容……而且我也没有太多创建CSS的经验，#2-为什么不在Javascript中显式设置文本字体来创建跨度？…为什么需要创建单独的CSS文件？注意，我在跨度中添加了以下更改，它去掉了文本阴影，设置为空白和正常：文本阴影：无；颜色：黑色；字体重量：normalHi Taifun，感谢mucho提供的额外反馈…改变CSS的另一种方法是将CSS添加到head部分。很高兴有一个可靠的例子。说实话，CSS在这一点上对我来说似乎有点脆弱和复杂…我正在使用其他人的代码示例对其进行攻击，没有一个坚实的理解…叹气：我想你应该从某个地方开始。再次：谢谢。