我正在研究的网页在列表中使用了一些花哨的V形符号.我想定义一个列表样式,它可以根据列表项本身的字体大小进行扩展:这样做是我问题的最终目标.

我们目前将这些V形文件保存在SVG文件中(其中一个在下面提供),因此它们可以放大而不会看起来很糟糕.他们被引用如下:

ul.foo {
    list-style-image: url("../images/chevron.svg");
}

我们在网站周围使用这些雪佛龙列表几次.有时他们使用大文本,有时文本较小或正常.我们不得不为每个字体大小(例如一个新的字形图像chevron-small.svg,chevron-medium.svg,chevron-large.svg,等),但肯定有一个更好的办法,让我们只使用了一个图像,并把它放大和缩小在自己的基础上的字体尺寸!

但是,我还没有想出如何使用字体大小来缩放图像.

列表样式图像的W3 wiki表明"如果图像的固有宽度或高度以百分比形式给出,则该百分比将根据1em来解决",这听起来就像我们想要的那样.我还没有弄清楚如何实现这一目标.布赖恩·坎贝尔的回答给我怎样才能让一个SVG的规模与其父容器？似乎提出了一种方法来使这个百分比发生,但是当我设置100%的宽度或高度时,即使字体很大,人字形的子弹点也会显得非常微小或根本没有.

如何使用文本大小完全实现此列表样式图像缩放,以便当UL的文本大小变大时,子弹图像也会如此？

(字形字体:我们不能使用它们.它们可以在视觉上完成工作,但是它们对可访问性产生了不良影响,因为屏幕阅读器不会将子弹读出为子弹,而是作为其他一些奇怪的字符.我们可以定义可能是自定义字形字体,并用它们替换它中的项目符号字符,但这样做的文件大小开销会过大.据我所知,我们需要使用图像.)

我的SVG代码

SVG来自Illustrator并具有以下代码:

<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 15.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
     width="8px" height="14px" viewBox="0 0 8 14" enable-background="new 0 0 8 14" xml:space="preserve">
<path fill="#666666" d="M0.37,12.638l5.726-5.565L0.531,1.347C0.252,1.059,0.261,0.601,0.547,0.321
    c0.289-0.279,0.746-0.272,1.026,0.016l6.062,6.24c0,0.002,0.006,0.004,0.008,0.006c0.068,0.07,0.119,0.156,0.156,0.244
    C7.902,7.088,7.846,7.399,7.631,7.61c-0.002,0.004-0.006,0.004-0.01,0.006l-6.238,6.063c-0.143,0.141-0.331,0.209-0.514,0.205
    c-0.187-0.006-0.372-0.078-0.511-0.221C0.076,13.376,0.083,12.919,0.37,12.638"/>
</svg>

其中显示如下,其中文本是16px,并且V形符号没有缩放到字体大小,但是相当大且可见(在这种情况下比想象的要大一点,但是让我们忽略它,因为图像本身可以被编辑): …

我是网页设计和开发的新手,并且一直在玩不同的造型技术.在我的研究过程中,我遇到了图标字体.虽然我已经调查了很多教程和视频,但是尽管付出了很多努力,但我还是无法成功地使用图标字体.

首先,我去了一个提供大量图标字体的网站,选择了我喜欢的字体,生成它们,最后将它们下载到一个文件夹中.但是现在这些图标字体在文件夹中,我该怎么办？