CSSを使用するときは、Webインスペクターを使用して新しいルールを追加したり、既存のルールをインタラクティブに編集したりできるのが本当に好きです。ただし、 @font-faceルールの操作方法がわかりません
スタイルシートの@font-faceルールが認識され、有効になっているかどうかはどこで確認できますか？
たとえば、「div.foo」セレクターを使用するルールがある場合、ルールが有効になっていることを確認し、その値をライブ編集するために、クラスfooを持つページ上のすべてのdivを検査するだけです。
新しい@font-faceルールをインタラクティブに追加するにはどうすればよいですか？
[新しいスタイルルール]ボタン（+記号の付いたもの）を使用して追加しようとすると、Chromeがクラッシュします。セレクターの奇妙な「@」と関係がありますか？とにかく「@」とは何ですか？
デバッガーが一番好きなのでChrome19を使用していますが、それがここでの唯一の可能性である場合は、別のブラウザーを使用してもかまいません。
（1）できないと思います。@ font-faceは、使用可能なフォントのセットに新しいフォントを追加するだけです。を含む要素を指定するfont-family: Fooと、開発ツールはフォントの出所に関する情報を提供しないようです（ローカルで利用できるか、@ font-faceルールを介してダウンロードされるかどうか）。ページのスタイルシートで@font-faceルールを手動で検索し、どのフォント名が「外部」であるかを書き留める必要があります。（これを行うには、開発ツールの[リソース]タブに移動し、検索ボックスに「@ font-face」と入力します。）
ところで、開発ツールの[リソース]タブに移動し、[フォント]ディレクトリを展開すると、Webページで使用できる外部フォントファイルを表示できます。このディレクトリ内の各ファイルは、1つの@font-faceルールを表します。
（2） @ font-faceはスタイルルールではなく、at-ruleであるため、「NewStyleRule」メソッドは使用できません。@ font-faceルールをWebページに追加するには、開発ツールの[リソース]タブに移動し、Stylesheetsディレクトリでスタイルシート（.cssファイル）を選択して、@font-をコピーして貼り付けます。そのスタイルシートにルールを直面させます。これで、新しく追加されたフォント名をfont-familyプロパティですぐに使用できるようになります。