跨浏览器的文本笔划方法？答案

【问题标题】：Cross-browser text-stroke methods?跨浏览器的文本笔划方法？
【发布时间】：2010-04-02 18:45:01
【问题描述】：

想在某些字体上使用新的text-stroke css 属性，但目前只有 webkit 支持它。

是否有任何跨浏览器兼容的应用文本笔划的方法？

我一直在研究诸如 Cufon 之类的 JavaScript 解决方案，并且似乎已经提出了支持它的功能请求：Cufon text-stroke feature request。 sIFR 似乎也不支持笔画/轮廓..

【问题讨论】：

之所以只有webkit支持，是因为webkit自己编造的，CSS3中没有这种东西。

标签： css sifr cufon

【解决方案1】：

这有点小技巧，但您可以使用 Cufon 中的文本阴影来做到这一点。

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

只需使用两个文本阴影并将它们对角相对放置。

【讨论】：

看起来很糟糕，但可能取决于字体

【解决方案2】：

啊哈！发布此问题后不久发现FLIR。

这里是文字笔划效果示例：http://facelift.mawhorter.net/doc/plugins-quickeffects

quickeffects 插件包含在download 中。

一个不错的drupal模块也适合感兴趣的人：http://drupal.org/project/flir

【讨论】：

FLIR 的链接已损坏。

【解决方案3】：

如果您正在寻找 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 模块并且有 unpredic

【讨论】：

嗨，@nicholas.alipaz 您的模块是否允许在悬停时修改 textShadow ？如果是，你能展示一下它的语法吗？感谢您的工作