1

你好善良的互联网人，

我在 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 会是什么？

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

4

2 回答 2

1

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

压倒一切的主题

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

另见工作示例

编辑：无需创建外部自定义 CSS 文件....您可以将其添加到<style>html 的头部以覆盖您的 CSS，另请参见此小提琴 

<style>
   .ui-slider-inner-label {
     text-shadow:none;
     color:black;
     font-weight:normal;
   }
</style>
于 2012-12-14T14:32:01.787 回答
1

再次注意 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>');      
  //
于 2012-12-15T22:20:45.827 回答