非常にレアなんですが、埋め込みフォントや 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の最新記事】
