Text Effect - Image to css/jQuery

I am trying to duplicate this text in either jquery or css but so far have not been able to. Anyone g开发者_JAVA百科ot any ideas because I am fresh out:

Text-Color: 4F4F4F
Shadow-Color: E7EAEE

Have you tried make a jQuery function that would read the date and locate the corresponding image?

Text replacement is the only "safe" way to get a custom font on the web. Some websites offer weird work arounds where they have fonts that you can use - but you have to pay and most of their fonts look terrible.

I created a text-to-image replacement script in jQuery for this site as the client kept pushing for all the custom fonts everywhere. (yes I know the preload on it is long but the whole site is images more or less :c).

Here is a sample of the script from the links section :

   //replacing all links with coresponding images
        $('#nav li a').each(function() {
          //this "reads" the text and saves it into a variable simply named string (a bit faux-paux…)
          string = $(this).text();

          //this gets the filename out of the link text
          filename = string.toLowerCase().replace(/ /g, '-').replace(/([^0-9a-z-])/g,'');             

          //this puts an image into the li anchor tag over the text
          $(this).html('<img src="images/link-' + filename + '.png" />');
          $('#nav li a').css({
            'position' : 'relative',
            'top' : '-20px'
          });

I would like to warn you that abuse of this system will cause horrendous load times. I say stick with the universal fonts for now and use this incredibly sparingly. I was forced to over use it and the user is the person who pays for it in the end.

Your CSS should look like:

color: #4f4f4f;
text-shadow: #e7eaee 2px -2px 2px;

The text-shadow arguments are <color> <x-coordinate> <y-coordinate> <blur>

You may want to fiddle around with the coordinates and blur radius to achieve the effect you're after.