非常にレアなんですが、埋め込みフォントや 3Dフォントを運用しているので結構重要です。 全て自分のサイトでまかなう事になる 3Dフォント では起きないですが、ブログ等への埋め込みを想定している場合は確実に起きます。オリジナルの処理としては、CSS が全く無い場合は新規にそこへ追加するので問題無く、他のドメインで外部 CSS を読み込んでいる時に起きます。 また、面倒な事に必ず起きるのでは無く、そのページの環境に依存するというか、CSS が一つ以上ある場合は先頭を使う事になっているのですが、これが外部だとアウトになります。オリジナルではそういうエラー処理が無いので追加しました。 まず、一覧の中からエラーの起きない CSS を try 〜 catch で選定して、それを使うようにするという処理で、全部エラーだったらうまく動かないので少なくとも一つは自ドメインか、createElement で作成されたものが存在する必要があります。 必ず考えられる問題が発生する環境は、ブログに独自ドメインを割り当てている場合で、元のドメインでもアクセスできる場合は、少なくともどちらかでエラーが出る事になるので注意が必要です。 レアな情報でした 832行目から
} else if (document.styleSheets) { if (!document.styleSheets.length) { (function() { // create a stylesheet if we need to var styleSheet = document.createElement('style'); styleSheet.type = 'text/css'; document.getElementsByTagName('head')[0].appendChild(styleSheet); })() } var targetParts = 0; for( targetParts = 0; targetParts < document.styleSheets.length; targetParts++ ) { try { document.styleSheets[targetParts].insertRule(typefaceSelectors.join(',') + ' { visibility: hidden; }', 0); break; } catch(e) {} } try { document.styleSheets[targetParts].insertRule( '.typeface-js-selected-text { \ color: rgba(128, 128, 128, 0); \ opacity: 0.30; \ position: absolute; \ font-family: Arial, sans-serif; \ white-space: pre \ }', 0 ); } catch(e) {}; try { // set selection style for Mozilla / Firefox document.styleSheets[targetParts].insertRule( '.typeface-js-selected-text::-moz-selection { background: blue; }', 0 ); } catch(e) {}; try { // set styles for browsers with CSS3 selectors (Safari, Chrome) document.styleSheets[targetParts].insertRule( '.typeface-js-selected-text::selection { background: blue; }', 0 ); } catch(e) {}; // most unfortunately, sniff for WebKit's quirky selection behavior if (/WebKit/i.test(navigator.userAgent)) { document.styleSheets[targetParts].insertRule( '.typeface-js-vector-container { position: relative }', 0 ); } }
|
【typeface.jsの最新記事】