在自定义跨度jQuery Mobile滑块标签上设置字体 [英] Set font on custom span jQuery Mobile slider labels

问题描述

你好，互联网的人，

我在jQuery Mobile范围滑块的左侧和右侧添加和添加一些文本内容作为标签，效果很好，但是我似乎无法使字体正常工作...字体不是正确显示，而且在跨度范围内我似乎都无法设置/重置标签字体.

I'm prepending and appending some text content as labels on the left and right side of a jQuery Mobile range slider, which works ok, but I can't seem to get the font to behave...the font is not displaying properly, and I can't seem to set/reset the label font either within the span.

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

以下是放置在滑块左侧和右侧的自定义滑块标签(最小和最大滑块范围值)上的javascript代码:

Here's the javascript code that puts on the custom slider labels (minimum and maximum slider range values) on the left and right side of the slider:

 $.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');

我尝试了许多不同的迭代，并尝试在跨度中显式设置字体，但可惜没有运气.

I've tried many different iterations and attempts to explicitly set the font in the span, but alas, no luck.

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

I found the code originally out on the jquery forum at following link: https://forum.jquery.com/topic/how-do-i-add-text-labels-below-slider

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

The above link also has a jsfiddle, and the font comes out fine...so I just don't understand what I'm overlooking. http://jsfiddle.net/cUNyr/1/

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

Any help or advice would be much appreciated.

更新说明:Jack和Taifun都提供了一些非常有用的提示和想法，但是，我仍在努力在CSS上进行哪些更改以及如何进行更改?我也感到困惑/沮丧，我什至无法确定文本字体的开头甚至是阴影"?...这是Firebug中显示的span CSS:

Update note: both Jack and Taifun offered some very helpful tips and ideas, however, I'm still struggling with what and how exactly to alter on the CSS? I'm also puzzled/frustrated about how I would even be able to determine in the text font even has a 'shadow' in the first place?...here's the span CSS as shown in Firebug:

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

Firebug中没有显示文本阴影"属性.太好了，嗯，我要找什么?用什么工具? 文本阴影"从何而来?什么是CSS超越?

There is no 'text shadow' attribute showing up in Firebug. Soooo, hmmmmm, what do I look for? and with what tool? Where is the 'text shadow' coming from? What would the CSS over-ride be?

在这一点上，奇怪的字体如何显示以及如何解决仍然是一个谜...但是我敢肯定，有一个重要的教训要学习(禅宗:珍惜您的错误) )，下一次我遇到类似情况.再说一遍:你们会提供超级帮助的...我觉得我已经很接近要解决这个问题了……但是可惜，还没有到此.

At this point, how the odd-ball font appears, and how to fix it is still a bit of a mystery...but I'm sure there's an important lesson to be learned (a Zen thing: value your bugs) for the next time I run into a similar situation. Again: ya'll have been super helpful...and I feel like I'm close to having this figured out...but alas, not quite there yet.

推荐答案

在您的示例中，您正在使用data-theme="b" data-track-theme="a".删除后，您将获得可读的字体.但是，如果您想使用该主题，则可以按照@Jack所述覆盖CSS，更多信息

in your example you are using data-theme="b" data-track-theme="a". Removing that you get a readable font. However if you like to use that theme, you can override the CSS as @Jack mentioned, more info here.

覆盖主题

主题是一个坚实的起点，但实际上是 定制.由于所有内容均由CSS控制，因此使用 Web检查器工具来标识您想要的样式属性 修改.

The themes are meant as a solid starting point, but are meant to be customized. Since everything is controlled by CSS, it's easy to use a web inspector tool to identify the style properties you want to modify.

另请参见工作示例

see also working example

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

EDIT: there is no need to create an external custom CSS file.... You can add this <style> in the head of your html to override your CSS, see also this fiddle

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

这篇关于在自定义跨度jQuery Mobile滑块标签上设置字体的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！