Кроссбраузерные методы обводки текста?

Вы хотите использовать новый атрибут css text-stroke css для некоторых шрифтов, но на данный момент его поддерживает только webkit.

Существуют ли совместимые с кросс-браузером методы применения обводки текста?

Я изучал решения javascript, такие как Cufon, и, похоже, был добавлен запрос функции для уже поддерживает его: запрос функции Cufon text-stroke. sIFR, похоже, также не поддерживает обводку / контуры ..


css sifr cufon
person tester    schedule 02.04.2010    source источник
comment
Причина, по которой его поддерживает только webkit, состоит в том, что его создал webkit, а в CSS3 такого нет.   -  person Rob    schedule 02.04.2010

Ответы (3)


arrow_upward
3
arrow_downward

Это своего рода хитрость, но вы можете сделать это с помощью текстовых теней в Cufon.

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

Просто используйте две тени для текста и разместите их по диагонали напротив друг друга.

person S Pangborn    schedule 05.05.2010
comment
выглядит довольно плохо, но, вероятно, зависит от шрифта - person Thomas; 21.12.2010

arrow_upward
0
arrow_downward

Ахха! Обнаружил FLIR вскоре после публикации этого вопроса.

Вот пример эффекта обводки текста: http://facelift.mawhorter.net/doc/plugins-quickeffects

Плагин quickeffects включен в загрузку.

Хороший модуль drupal для тех, кому интересно: http://drupal.org/project/flir

person tester    schedule 02.04.2010
comment
Ссылка на FLIR не работает. - person Jasper; 26.01.2012

arrow_upward
0
arrow_downward

Если вы ищете решение для Drupal. Я сделал следующее с настраиваемым модулем и модулем cufon, установленным в качестве зависимости.

Настройте cufon как обычно, затем добавьте подмодуль следующим образом:

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

Если это не поможет оператору, я надеюсь, что это поможет кому-то другому. Кроме того, я попробовал модуль flir, и у меня возникли непредсказуемые

person nicholas.alipaz    schedule 15.02.2011
comment
привет, @ nicholas.alipaz. Ваш модуль позволяет изменять textShadow при наведении курсора? Если да, можете ли вы показать синтаксис для этого? Спасибо за вашу работу - person ; 26.02.2011