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

问题描述

您好，互联网上的好心人，

Hello kind people of the internet,

我在 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 中没有显示文本阴影"属性.Soooo，嗯，我在找什么?用什么工具?文字阴影"从何而来?CSS override 会是什么?

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?

此时，odd-ball 字体是如何出现的，以及如何修复它仍然是一个谜……但我确信有一个重要的教训需要学习(禅宗的事情:重视你的错误) 下次我遇到类似的情况.再说一遍:你们会非常乐于助人的……我觉得我已经接近解决这个问题了……但唉，还没有完全解决.

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 控制，因此很容易使用用于识别您想要的样式属性的网络检查器工具修改.

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.

另请参阅工作示例

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

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屋！