1

友人のために取り組んでいる ePUB で使用するために、MS Word から添付されたスタイルを CSS で再作成しようとしています。私はいつでも各章の見出しのスクリーンショットを取り、そのようにすることができますが、CSS で行うことをお勧めします。

これが私がWordで持っているものです：

ここに画像の説明を入力

ここに画像の説明を入力

これが私がこれまでに持っているコードです:

@font-face {
    font-family : "AR Christy";
    font-style : normal;
    font-weight : normal;
    src : url("../fonts/archristy.ttf");
}
h1 {
    font-family : "AR Christy", serif;
    font-weight : bold;
    font-style : normal;
    font-size : 30pt;
    text-decoration : none;
    font-variant : normal;
    color : #95B932;
   -webkit-text-stroke-width: 1px;
   -webkit-text-stroke-color: white;
   -webkit-text-stroke: 1px white;
text-shadow: 2px 2px 2px #888888;
    line-height : 1;

}

Safari でレンダリングすると、次のようになります。 ここに画像の説明を入力

それが理にかなっている場合、テキストの「テクスチャ」に問題があるようです。

あなたが助けようとすることに興味があるなら、フォントはここで入手できます: http://fontzone.net/font-details/ar-christy

違いをより明確にするために、次の 2 つのクローズアップ写真を追加しました。ワード版はこちら：

ここに画像の説明を入力

そして、これが現在の CSS バージョンです。

ここに画像の説明を入力

編集: ケリーの提案のおかげで、複数のシャドウ レイヤーを使用する必要があると判断しました。これは私が最終的に使用したコードです：

text-shadow: rgb(187, 187, 187) 0px 1px 0px,
  rgb(181, 181, 181) 0px 2px 0px,
  rgb(172, 172, 172) 0px 3px 0px,
  rgb(160, 160, 160) 0px 4px 0px,
  rgb(145, 145, 145) 0px 5px 0px,
  rgb(127, 127, 127) 0px 6px 0px,
  rgba(0, 0, 0, 0.199219) 0px 7px 1px,
  rgba(0, 0, 0, 0.296875) 0px 8px 6px;

これは次のように見えます...正確には一致しませんが、全体的な感触が好きです:

ここに画像の説明を入力

4

3 に答える 3

1

テクスチャの違いではなく、シャドウのみが欠落しています..

この行を追加するだけで、同様の結果が表示されます..

 -webkit-text-shadow: 2px 2px 2px #888888;

編集、

シャドウ効果を使用して、これを変更します (-webkit- が不要なため)

text-shadow:2px 4px 6px RGBA(0,0,0,0.7);

ここで、インセット シャドウを使用して可能なフォントの 3D 効果が必要です。私が作成したフィドルを確認してください。2 つのテキストにはシャドウがあり、もう 1 つはインセット シャドウがあり、似たような効果を作成します..単語と同じではありませんが3D, FIDDLE

これが役立つことを願っています。

于 2013-07-01T07:08:49.977 に答える
0

最終的な結果は、Word のスタイルを正確に模倣するものは何もないということです。上記のコードを使用して内側の影を作成しようとしましたが、使用していたフォントでは機能しませんでした。

複数の影を重ねることで達成された、別の 3D 効果を使用することになりました。使用したシャドウ コードと最終的なテキストは次のとおりです。

text-shadow: rgb(187, 187, 187) 0px 1px 0px,
  rgb(181, 181, 181) 0px 2px 0px,
  rgb(172, 172, 172) 0px 3px 0px,
  rgb(160, 160, 160) 0px 4px 0px,
  rgb(145, 145, 145) 0px 5px 0px,
  rgb(127, 127, 127) 0px 6px 0px,
  rgba(0, 0, 0, 0.199219) 0px 7px 1px,
  rgba(0, 0, 0, 0.296875) 0px 8px 6px;

ここに画像の説明を入力

私はケリーに、複数のレイヤーで正しい道を歩ませてくれた功績を認めました。

于 2013-07-03T00:57:36.153 に答える