グリフフォントを使用できないときに、リストのフォントサイズでリストスタイルの画像を拡大縮小するにはどうすればよいですか？

Question

私が取り組んでいるWebページでは、リスト内の箇条書きに派手なシェブロンを使用しています。リストアイテム自体のフォントサイズに合わせてスケーリングするリストスタイルを定義したいと思います。そうすることが、ここでの私の問題の最終的な最終目標です。

現在、これらのシェブロンをSVGファイル（そのうちの1つを以下に示します）に保持しているため、ひどく見えることなく拡大できます。これらは次のように参照されます。

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

これらのシェブロンリストは、サイト内でそれぞれ数回使用します。時には大きなテキストで、時には小さなまたは通常のサイズのテキストで表示されます。フォントサイズごとに新しいシェブロン画像を作成する必要があります（例：chevron-small.svg、chevron-medium.svg、chevron-large.svgなど）、しかし、確かに1つの画像だけを使用して、フォントサイズに基づいてそれ自体を拡大または縮小できるより良い方法があります！

しかし、私はまだフォントサイズで画像を拡大縮小する方法を理解していません。

list-style-imageのW3 wiki は、「画像の固有の幅または高さがパーセンテージで指定されている場合、そのパーセンテージは1emに対して解決される」ことを示唆しています。しかし、これを実現する方法を考え出していません。 ブライアンキャンベルの答え to 親コンテナでsvgスケールを作成するにはどうすればよいですか？ この割合を実現する方法を提案するように見えますが、幅または高さを設定すると100％の場合、山形の箇条書きは、フォントサイズが大きい場合でも、非常に小さいかまったく表示されません。

このlist-style-imageをテキストサイズで完全に拡大縮小して、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>

次のように表示されます。テキストは16ピクセルで、シェブロンはフォントサイズに合わせてスケーリングされていませんが、かなり大きく表示されています（この場合は必要以上に大きくなりますが、画像自体は編集される）：

私が述べたように、私は ブライアン・キャンベルの答え に従い、幅または高さのプロパティを100％に設定しようとしました：

<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="100%" viewBox="0 0 8 14" enable-background="new 0 0 8 14" xml:space="preserve">

ただし、幅または高さのいずれかを100％と定義すると、シェブロンは小さくなり、1emよりもはるかに小さくなります。

（Firefoxのスクリーンショット。Chromeで少し大きめですが、16pxよりもはるかに小さいです。）

コードスニペット

/* 
The image referenced here is the SVG provided above, with base 64 encoding. It is the
freshly exported version that still has a defined width and height of 8px and 14px.
You may wish to just save the SVG above locally.
*/

ul {
  list-style-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz48IURPQ1RZUEUgc3ZnIFBVQkxJQyAiLS8vVzNDLy9EVEQgU1ZHIDEuMS8vRU4iICJodHRwOi8vd3d3LnczLm9yZy9HcmFwaGljcy9TVkcvMS4xL0RURC9zdmcxMS5kdGQiPjxzdmcgdmVyc2lvbj0iMS4xIiBpZD0iTGF5ZXJfMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeD0iMHB4IiB5PSIwcHgiIHdpZHRoPSI4cHgiIGhlaWdodD0iMTRweCIgdmlld0JveD0iMCAwIDggMTQiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDggMTQiIHhtbDpzcGFjZT0icHJlc2VydmUiPjxwYXRoIGZpbGw9IiM2NjY2NjYiIGQ9Ik0wLjM3LDEyLjYzOGw1LjcyNi01LjU2NUwwLjUzMSwxLjM0N0MwLjI1MiwxLjA1OSwwLjI2MSwwLjYwMSwwLjU0NywwLjMyMWMwLjI4OS0wLjI3OSwwLjc0Ni0wLjI3MiwxLjAyNiwwLjAxNmw2LjA2Miw2LjI0YzAsMC4wMDIsMC4wMDYsMC4wMDQsMC4wMDgsMC4wMDZjMC4wNjgsMC4wNywwLjExOSwwLjE1NiwwLjE1NiwwLjI0NEM3LjkwMiw3LjA4OCw3Ljg0Niw3LjM5OSw3LjYzMSw3LjYxYy0wLjAwMiwwLjAwNC0wLjAwNiwwLjAwNC0wLjAxLDAuMDA2bC02LjIzOCw2LjA2M2MtMC4xNDMsMC4xNDEtMC4zMzEsMC4yMDktMC41MTQsMC4yMDVjLTAuMTg3LTAuMDA2LTAuMzcyLTAuMDc4LTAuNTExLTAuMjIxQzAuMDc2LDEzLjM3NiwwLjA4MywxMi45MTksMC4zNywxMi42MzgiLz48L3N2Zz4=');
  /* Or if you wish to save the SVG locally:
  list-style-image: url('chevron.svg');
  */
}

.small-list {
   font-size: 85%;
}

.large-list {
  font-size: 150%;
}

<ul class="small-list">
  <li>The goal is to make the chevron smaller for this list</li>
  <li>Specifically, just slightly smaller than capital letters, as stated.</li>
  <li>Nomas matas</li>
  <li>Roris dedit</li>
</ul>

<ul class="large-list">
  <li>And larger for this list</li>
  <li>Nomas matas</li>
  <li>Roris dedit</li>
</ul>

Answer 1

各liの前に擬似要素を使用してこの問題を解決するアプローチをします

これがマークアップです

ul {
    list-style: none;
}

li {
    position: relative;
}

li:before {
    /*
    The desired width gets defined in two places: The element width, and background size.
    The height only gets defined once, in background size.
    */
    position: absolute;
    display: block;
    content: '\2022'; /* bullet point, for screen readers */
    text-indent: -999999px; /* move the bullet point out of sight */
    left: -.75em;
    width: .4em; /* desired width of the image */
    height: 1em; /* unrelated to image height; this is so it gets snipped */
    background-repeat: no-repeat;
    background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz48IURPQ1RZUEUgc3ZnIFBVQkxJQyAiLS8vVzNDLy9EVEQgU1ZHIDEuMS8vRU4iICJodHRwOi8vd3d3LnczLm9yZy9HcmFwaGljcy9TVkcvMS4xL0RURC9zdmcxMS5kdGQiPjxzdmcgdmVyc2lvbj0iMS4xIiBpZD0iTGF5ZXJfMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeD0iMHB4IiB5PSIwcHgiIHdpZHRoPSI4cHgiIGhlaWdodD0iMTRweCIgdmlld0JveD0iMCAwIDggMTQiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDggMTQiIHhtbDpzcGFjZT0icHJlc2VydmUiPjxwYXRoIGZpbGw9IiM2NjY2NjYiIGQ9Ik0wLjM3LDEyLjYzOGw1LjcyNi01LjU2NUwwLjUzMSwxLjM0N0MwLjI1MiwxLjA1OSwwLjI2MSwwLjYwMSwwLjU0NywwLjMyMWMwLjI4OS0wLjI3OSwwLjc0Ni0wLjI3MiwxLjAyNiwwLjAxNmw2LjA2Miw2LjI0YzAsMC4wMDIsMC4wMDYsMC4wMDQsMC4wMDgsMC4wMDZjMC4wNjgsMC4wNywwLjExOSwwLjE1NiwwLjE1NiwwLjI0NEM3LjkwMiw3LjA4OCw3Ljg0Niw3LjM5OSw3LjYzMSw3LjYxYy0wLjAwMiwwLjAwNC0wLjAwNiwwLjAwNC0wLjAxLDAuMDA2bC02LjIzOCw2LjA2M2MtMC4xNDMsMC4xNDEtMC4zMzEsMC4yMDktMC41MTQsMC4yMDVjLTAuMTg3LTAuMDA2LTAuMzcyLTAuMDc4LTAuNTExLTAuMjIxQzAuMDc2LDEzLjM3NiwwLjA4MywxMi45MTksMC4zNywxMi42MzgiLz48L3N2Zz4=');
    background-size: .4em .7em;
    background-position: 0 .3em;
}

.small-list {
    font-size: 85%;
}

.large-list {
    font-size: 150%;
}

<ul class="small-list">
  <li>The goal is to make the chevron smaller for this list</li>
  <li>Specifically, just slightly smaller than capital letters, as stated.</li>
  <li>Nomas matas</li>
  <li>Roris dedit</li>
</ul>
    
<ul class="large-list">
  <li>And larger for this list</li>
  <li>Multiline list item<br>for testing</li>
  <li>Nomas matas</li>
  <li>Roris dedit</li>
</ul>

説明：

• まず、ulのデフォルトの箇条書きを取り除きます
• 次に、:beforeセレクターとcontent: '\2022'; を使用して、各liの前に擬似要素を作成します。
  • content: '\2022';は、スクリーンリーダーが読み取るための nicode bullet point 、•を追加します。テキストのインデントにより、見えにくくなります。
• 次に、疑似要素に背景（シェブロン）を適用し、いくつかのプロパティを使用してサイズを変更します。ここで重要なのは、ディメンションがsvgと同じ比率を維持することを保証することです。擬似要素の次元はemを使用して定義されているため、font-sizeが変更されると比例して調整されます。最後に、弾丸があったはずの背景を配置します。
  • background-size: .4em .7em;は、画像のサイズを設定する方法で背景のサイズを設定するようブラウザに指示します。ここで正しいアスペクト比を維持する必要があります。
  • background-position: 0 .3em;は、テキストに合わせてシェブロン画像を移動します。
  • width: .4em;は、psuedo要素を画像に合わせて十分に広くし、height: 1em;は行の高さに合わせて、オフセットにも合わせて十分に高くします。

警告：-IE 8はbackground-sizeをサポートしていませんが、これはそうではないと思いますsvgのレンダリングもサポートしていないため、問題が発生します。

Answer 2

SVG画像XMLで、widthおよびheight属性を削除する必要があります。そうすると、SVGはfont-sizeの100％または1emにスケーリングされます

これが完了した画像のbase64バージョンです。

list-style-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz48IURPQ1RZUEUgc3ZnIFBVQkxJQyAiLS8vVzNDLy9EVEQgU1ZHIDEuMS8vRU4iICJodHRwOi8vd3d3LnczLm9yZy9HcmFwaGljcy9TVkcvMS4xL0RURC9zdmcxMS5kdGQiPjxzdmcgdmVyc2lvbj0iMS4xIiBpZD0iTGF5ZXJfMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeD0iMHB4IiB5PSIwcHgiIHZpZXdCb3g9IjAgMCA4IDE0IiBlbmFibGUtYmFja2dyb3VuZD0ibmV3IDAgMCA4IDE0IiB4bWw6c3BhY2U9InByZXNlcnZlIj48cGF0aCBmaWxsPSIjNjY2NjY2IiBkPSJNMC4zNywxMi42MzhsNS43MjYtNS41NjVMMC41MzEsMS4zNDdDMC4yNTIsMS4wNTksMC4yNjEsMC42MDEsMC41NDcsMC4zMjFjMC4yODktMC4yNzksMC43NDYtMC4yNzIsMS4wMjYsMC4wMTZsNi4wNjIsNi4yNGMwLDAuMDAyLDAuMDA2LDAuMDA0LDAuMDA4LDAuMDA2YzAuMDY4LDAuMDcsMC4xMTksMC4xNTYsMC4xNTYsMC4yNDRDNy45MDIsNy4wODgsNy44NDYsNy4zOTksNy42MzEsNy42MWMtMC4wMDIsMC4wMDQtMC4wMDYsMC4wMDQtMC4wMSwwLjAwNmwtNi4yMzgsNi4wNjNjLTAuMTQzLDAuMTQxLTAuMzMxLDAuMjA5LTAuNTE0LDAuMjA1Yy0wLjE4Ny0wLjAwNi0wLjM3Mi0wLjA3OC0wLjUxMS0wLjIyMUMwLjA3NiwxMy4zNzYsMC4wODMsMTIuOTE5LDAuMzcsMTIuNjM4Ii8+PC9zdmc+');

残念ながら、list-style-imageのサイズを明示的に設定することはできませんが、HTMLをさらに必要としないハックソリューションが1つあります。

LI要素に1行のテキストしか含まれていない場合（リストの場合が非常に多い）、cssセレクター::first-lineを使用して、フォントサイズを拡大または縮小することができます。リストスタイル画像。

この代替ソリューションを与える：

ul {
  list-style-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz48IURPQ1RZUEUgc3ZnIFBVQkxJQyAiLS8vVzNDLy9EVEQgU1ZHIDEuMS8vRU4iICJodHRwOi8vd3d3LnczLm9yZy9HcmFwaGljcy9TVkcvMS4xL0RURC9zdmcxMS5kdGQiPjxzdmcgdmVyc2lvbj0iMS4xIiBpZD0iTGF5ZXJfMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeD0iMHB4IiB5PSIwcHgiIHZpZXdCb3g9IjAgMCA4IDE0IiBlbmFibGUtYmFja2dyb3VuZD0ibmV3IDAgMCA4IDE0IiB4bWw6c3BhY2U9InByZXNlcnZlIj48cGF0aCBmaWxsPSIjNjY2NjY2IiBkPSJNMC4zNywxMi42MzhsNS43MjYtNS41NjVMMC41MzEsMS4zNDdDMC4yNTIsMS4wNTksMC4yNjEsMC42MDEsMC41NDcsMC4zMjFjMC4yODktMC4yNzksMC43NDYtMC4yNzIsMS4wMjYsMC4wMTZsNi4wNjIsNi4yNGMwLDAuMDAyLDAuMDA2LDAuMDA0LDAuMDA4LDAuMDA2YzAuMDY4LDAuMDcsMC4xMTksMC4xNTYsMC4xNTYsMC4yNDRDNy45MDIsNy4wODgsNy44NDYsNy4zOTksNy42MzEsNy42MWMtMC4wMDIsMC4wMDQtMC4wMDYsMC4wMDQtMC4wMSwwLjAwNmwtNi4yMzgsNi4wNjNjLTAuMTQzLDAuMTQxLTAuMzMxLDAuMjA5LTAuNTE0LDAuMjA1Yy0wLjE4Ny0wLjAwNi0wLjM3Mi0wLjA3OC0wLjUxMS0wLjIyMUMwLjA3NiwxMy4zNzYsMC4wODMsMTIuOTE5LDAuMzcsMTIuNjM4Ii8+PC9zdmc+');
}

.small-list {
  font-size: 140%;
}
.large-list {
  font-size: 350%;
}

.small-list li::first-line,
.large-list li::first-line{
 font-size: 70%;
}

Answer 3

Cssでsvgを直接定義し、必要に応じて高さおよび幅を変更することができますが、非常にドライではありませんが、動作します：

.small-list {
  font-size: 85%;
  list-style-image: url('data:image/svg+xml;utf8,<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 8 14" width="6" height="9"><path fill="%23666666" 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>');
}
.large-list {
  font-size: 150%;
  list-style-image: url('data:image/svg+xml;utf8,<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 8 14" width="8" height="14"><path fill="%23666666" 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>');
}

<ul class="small-list">
  <li>The goal is to make the chevron smaller for this list</li>
  <li>Specifically, just slightly smaller than capital letters, as stated.</li>
  <li>Nomas matas</li>
  <li>Roris dedit</li>
</ul>

<ul class="large-list">
  <li>And larger for this list</li>
  <li>Nomas matas</li>
  <li>Roris dedit</li>
</ul>

または、svgをリストスタイルの画像としてではなく背景画像として使用することで、少し乾燥させることができます。 cssにsvgを配置する必要はないことに注意してください：

ul {
  list-style: none;
  padding-left: 0;
}
li {
  padding-left: .65em;
  background: url('data:image/svg+xml;utf8,<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 8 14"><path fill="%23666666" 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>')no-repeat scroll 0% 50% /.65em .65em transparent;
}
.small-list li {
  font-size: 85%;
}
.large-list li {
  font-size: 150%;
}

<ul class="small-list">
  <li>The goal is to make the chevron smaller for this list</li>
  <li>Specifically, just slightly smaller than capital letters, as stated.</li>
  <li>Nomas matas</li>
  <li>Roris dedit</li>
</ul>
<ul class="large-list">
  <li>And larger for this list</li>
  <li>Nomas matas</li>
  <li>Roris dedit</li>
</ul>

Answer 4

これは、svgを:: beforeコンテンツの背景画像として使用し、emを使用してサイズ設定してフォントと同じサイズを維持します。画像は、テキストのサイズを変更したり、ズームインまたはズームアウトしても、テキストと同じサイズよりも小さくなります。

ul.foo,
ul.foo li {
  list-style-type: none;
  padding: 0;
  margin: 0;
}
ul.foo li {
  height: 1em;
}
ul.foo li:before {
  content: "";
  background-image: url(http://imgh.us/chevron_1.svg);
  background-size: .5em .5em;
  background-repeat: no-repeat;
  display: inline-block;
  vertical-align: top;
  position: relative;
  top: 50%;
  margin-top: -.175em;
  width: .5em;
  height: .5em;
}

<ul class="foo">
  <li>List Item</li>
  <li>List Item</li>
  <li>List Item</li>
  <li>List Item</li>
</ul>
<ul class="foo" style="font-size: 2em">
  <li>List Item</li>
  <li>List Item</li>
  <li>List Item</li>
  <li>List Item</li>
</ul>

Answer 5

SVGを埋め込み画像として使用できます。

<img src="chevron.svg" alt="chevron-icon" class="my-icon" />

* CSS

.my-icon{
    width:50px;
    height:auto;
}

役立つ記事：

http://soqr.fr/testsvg/embed-svg-liquid-layout-responsive-web-design.php

ブラウザーの互換性を高めるために、SVGファイルをフォントに変換することをお勧めします。これはここで実行できます。

https://icomoon.io/

または、FontAwesomeのような事前に設計されたフォントを使用します。

http://fontawesome.io/

ここで、必要なアイコンを取得します。

http://fontawesome.io/icon/chevron-right/

以下でFontAwesomeを実装します。

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">

しかし、man in middleファイルを使用する代わりに、ソースファイルをダウンロードすることを強くお勧めします。

そして、これを追加しますCSS：

ul{
    list-style:none;
    color:#888;
    font-size:24px;
}

ul li:before{
    font-family: FontAwesome;
    content:"\f054";
}

[〜＃〜] html [〜＃〜]

<ul>
    <li>Item 1</li>
    <li>Item 2</li>
</ul>

ここでプレビューを取得できます。

http://jsfiddle.net/a1vkeg6c/1/

このようにして、あなたはあなたが望むのと同じSVGのRetinaサポートを、さらに実用的な方法で持つことになります。

お役に立てば幸いです！