web-dev-qa-db-ja.com

ボタン（テキストまたは画像）

サイトにCSSボタンまたはイメージボタンを作成する必要があるかどうかを知りたいです。何が良いですか？問題は、テキストがHelvetica Neueでフォーマットされていることです（私はそのフォントがとても気に入っています）。著作権の問題のため、Webフォントとして使用できません。

CSSでボタンを作成すると、ブラウザではきれいに見えますが、ユーザーがブラウザに異なるテキストサイズを選択するとサイズが変更されます。

画像ボタンには、フォントを埋め込むことができるという利点がありますが、CSSボタンほど見栄えがよくありません。また、その場合、ボタン用にRetinaバージョンを作成する必要がありました（PCにRetinaディスプレイが搭載されている場合のみ）。

このトリッキーな状況で誰かが私を助けてくれますか？ Helvetica NeueのWebセーフな代替案を知っている人はいますか？ボタンのdivコンテナのサイズ変更を無効にする必要がありますか？ウェブサイトのボタンに関しては、今日の標準は何ですか？

TIA！

htmlweb-developmentcsswebsite-design
5
drpelz

実際、Linotypeは、Webでの使用が許可されているNeue Helveticaフォントを提供しています。

Webセーフの代替

ただし、Webライセンスの支払いを希望しない場合、Helvetica Neueの明らかなWebセーフの代替手段はHelveticaおよびArial。 sans-serifを使用するだけの場合、デフォルトはユーザーのプラットフォームのデフォルトのsans serifフォントになります。通常は次のとおりです。

  • HelveticaforMac
  • ArialforWindows
  • DroidまたはRobotoforAndroid
  • Deja Vu、Bitstream Vera Sans、またはArial（MSフォントがある場合* nixにインストール済み）

* nixユーザーの場合、おそらくArialまたはBitstream Vera Sansを指定して、多くの* nix OSが使用するデフォルトのsans serifフォントよりも知覚的に類似したHelveticaアナログを取得します。 （例：Deja Vu）。

FOSSフォント

または、これらの無料のオープンソースフォントを埋め込むことができます。

解放サンズ

  • HelveticaおよびArialに代わるオープンソース
  • 大きい部分の一部 Liberation Fonts Red HatがスポンサーとなっているGPL-2ライセンスフォントのファミリー
  • Liberation™Fontsコレクションの .sfd ソースファイルとすぐに使用できる.ttfバイナリの両方で利用可能 here Fedora Projectから

アリモ

FreeSans

意味的により正確で、必要な帯域幅が少なく、作業量が少ないため、通常は可能な限りCSS /テキストボタンを使用することを好みます。ただし、画像ボタンを作成し、適切なアクセシビリティ技術（代替テキストまたはスクリーンリーダーがアクセス可能なテキストラベル）を使用する場合は、同様に問題ないはずです。それは、知覚される余分な美的利益のためにあなたがどれだけ喜んでやるかに依存します。

7
Lèse majesté