Set font on custom span jQuery Mobile slider labels

问题

Hello kind people of the internet,

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.

Here's a test page: http://www.simdock.com/amort-test/dev-scratch/amort/scratchtesting-Slider-label-font-issue.html

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.

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

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.

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>

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.

回答1:

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.

Overriding themes

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

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>

回答2:

Note again the hints provided by Jack and Taifun were most helpful...but I did finally find a direct easy way to fix the issue by directly setting the text-shadow to none, then forcing the text to black (as was still displaying in white), and then to normal font (as was displaying in bold). So, while I didn't determine what exactly was inducing the shadow text, I did manage to at least reset it to a regular font using inline techniques, and avoided having to create an external custom CSS file.

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

来源：https://stackoverflow.com/questions/13870987/set-font-on-custom-span-jquery-mobile-slider-labels