CODEWITHSUNDEEP
csssifrcufon
tester
tester

Reputation: 23169

Cross-browser text-stroke methods?

Wanting to use the new text-stroke css attribute on some fonts, but as of this moment, only webkit has support for it.

Are there any cross-browser compatible methods of applying text-stroke?

I have been looking into javascript solutions such as Cufon and there seems to be a feature request put in for supporting it already: Cufon text-stroke feature request. sIFR doesn't seem to support stroke/outlines either..

Upvotes: 2

Views: 3811

Answers (3)

nicholas.alipaz
nicholas.alipaz

Reputation: 505

If you are looking for a Drupal solution. I did the following with a custom module and cufon module installed as a dependency.

Setup cufon as normal then add a submodule as follows:

cbi_cufon.module

<?php
// $Id$

/**
 * Implementation of hook_init().
 *
 * Just adding in our cufon definitions.
 */
function cbi_cufon_init() {
  $settings = array(
    array(
      'selector' => '#site-slogan',
      'options' => array(
        'fontFamily' => 'Fontname', // Likely need to change this to match yours or remove this line completely if you will have only one cufon font
        'textShadow' => '1px 0px #FFFFFF, 0px 1px #FFFFFF, -1px 0px #FFFFFF, 0px -1px #FFFFFF, 2px 2px #DDDDDD',
      ),
    ),
  );
  drupal_add_js(array('cufonSelectors' => $settings), 'setting');
}

cbi_cufon.info

;$Id$
name = Cufon font definitions
description = Adds font definitions for CBI.
core = 6.x
version = VERSION
dependencies[] = cufon

If this doesn't help the op, I hope it helps someone else. Additionally, I did try the flir module and had unpredic

Upvotes: 0

S Pangborn
S Pangborn

Reputation: 12739

It's a bit of a hack, but you can do it using text-shadows in Cufon.

Cufon.replace("h2", {hover:'true', textShadow: "#ff0000 1px 1px, #ff0000 -1px -1px"});

Just use two text-shadows and place them diagonally opposite of each other.

Upvotes: 3

tester
tester

Reputation: 23169

Ahha! Discovered FLIR shortly after posting this question.

Here is the text-stroke effect example: http://facelift.mawhorter.net/doc/plugins-quickeffects

The quickeffects plugin is included in the download.

A nice drupal module as well for those who are interested: http://drupal.org/project/flir

Upvotes: 0

Related Questions