Skip to content

Commit

Permalink
Fixed version range of Web fonts.
Browse files Browse the repository at this point in the history
  • Loading branch information
@itozyun
itozyun committed Jan 26, 2024
1 parent cf1ac83 commit 809332e
Show file tree
Hide file tree
Showing 6 changed files with 76 additions and 35 deletions.
9 changes: 7 additions & 2 deletions src/js/1_packageGlobal/1_packageVariable.js
View file
Expand Up @@ -56,8 +56,13 @@ var p_emptyFunction = emptyFunction, // || new Function(),
p_isChromiumBase = p_Chromium || p_ChromeWebView || p_AOSP || p_Samsung, // KaiOS, Silk ?
p_ChromiumEdge = p_Chromium && parseFloat( navigator.userAgent.split( 'Edg/' )[ 1 ] ), // brand が無いので
p_IEVersion = parseFloat( navigator.appVersion.split( 'Trident/' )[ 1 ] ) + 4, // brand が無いので
p_Windows = p_getPlatformVersionOf( WHAT_BROWSER_AM_I__PLATFORM_Win16 ) || p_getPlatformVersionOf( WHAT_BROWSER_AM_I__PLATFORM_Win32 ) ||
p_Windows = p_getPlatformVersionOf( WHAT_BROWSER_AM_I__PLATFORM_Win16 ) ||
p_getPlatformVersionOf( WHAT_BROWSER_AM_I__PLATFORM_Win32 ) ||
p_getPlatformVersionOf( WHAT_BROWSER_AM_I__PLATFORM_Win64 ),
p_MacOS = p_getPlatformVersionOf( WHAT_BROWSER_AM_I__PLATFORM_MacPPC ) ||
p_getPlatformVersionOf( WHAT_BROWSER_AM_I__PLATFORM_Mac68K ) ||
p_getPlatformVersionOf( WHAT_BROWSER_AM_I__PLATFORM_MacIntel ) ||
p_getPlatformVersionOf( WHAT_BROWSER_AM_I__PLATFORM_MacM1 ),
p_GoogleBot = 0 <= navigator.userAgent.indexOf( 'Googlebot/' ),

p_GeckoLt09 = p_Gecko < 0.9,
Expand Down Expand Up @@ -160,7 +165,7 @@ function p_notUndefined( val ){
*/
var p_FONTFACE_UNAVAILABLE_DUE_TO_BLOCKLIST = // Unavailable due to block list
p_WebKit < 525 || // Safari <3.1
p_SafariMobile < 3.2 ||
p_SafariMobile < 3.1 ||
p_AOSP < 2.2 ||
p_Presto < 10 || // block NDS, NDSi
p_Gecko && !p_FirefoxGte35 || // Gecko <1.9.1 p_CSSOM_insertRuleToStyleSheet( styleSheet, '@font-face', {} ) でエラー
Expand Down
4 changes: 3 additions & 1 deletion src/js/2_CoreModule/Timer.js
View file
Expand Up @@ -12,10 +12,12 @@ _p_Timer_remove = Timer_remove;
*/
/** @type {!Array.<!Object>} */
var TIMER_LISTENERS = [];
var TIMER_INTERVAL = 16,
var TIMER_INTERVAL = p_SafariMobile | 0 === 4 ? 64 : 16, // iOS Safari 4.2 : 16ms 間隔だと webFontTest に失敗する

This comment has been minimized.

Sign in to view

Copy link
@itozyun

itozyun Jan 27, 2024 •
edited

Author Owner

^^^
timerUID = 0,
timerClearID;

Debug.log( '[core] TIMER_INTERVAL:' + TIMER_INTERVAL );

/** @type {!Function|string} */
var Timer_on = function(){
var cb, i = 0, t = p_getTimestamp();
Expand Down
47 changes: 25 additions & 22 deletions src/js/6_CanUse/webfontTest.js
View file
Expand Up @@ -57,7 +57,8 @@ p_webFontTest = function( onCompleteHandler, targetWebFontName, opt_fontTypeAndF
var webFontTest_NO_SUPPORT_DATA_URI_FONT = p_Trident < 9;
// SVG の Data URI 化に制限あり。src:url() に #id が必要の為
var webFontTest_SVG_FONT_HAS_LIMITATION = p_Chromium < 6 || p_Presto ||
p_WebKit < 530 || p_SafariMobile < 4; // Safari ~3
p_WebKit < 530 || // Safari ~3
p_SafariMobile < 5; // iOS Safari 3~4?
var webFontTest_PREFIX = DEFINE_WEB_DOC_BASE__DEBUG && ( 'bad_' + p_getTimestamp() + '_' );
var webFontTest_INTERVAL_LOADING_WEBFONT = 5000;
var webFontTest_INTERVAL_EMBEDED_WEBFONT = 500;
Expand All @@ -69,7 +70,7 @@ var webFontTest_TEST_STRING = 'mmmmmmmmmmlliiiiiiiii';
var webFontTest_HAS_WEBKIT_FALLBACK_BUG = p_Chromium < 21 ||
// p_AOSP < 4.3 ||
p_SafariMobile < 7 ||
p_WebKit && ua.conpare( p_engineVersion, '536.11' ) <= 0;
p_WebKit && ua.conpare( p_engineVersion, '536.11' ) <= 0; // Safari <7
var webFontTest_BASE_FONT_LIST = [ 'monospace', 'sans-serif', 'serif' ];

if( !p_FONTFACE_UNAVAILABLE_DUE_TO_BLOCKLIST ){
Expand All @@ -78,34 +79,36 @@ if( !p_FONTFACE_UNAVAILABLE_DUE_TO_BLOCKLIST ){
webFontTest_HAS_WEBKIT_FALLBACK_BUG && p_WebKit && Debug.log( '[webFontTest] hasWebKitFallbackBug : p_WebKit=' + p_WebKit );
};

var webFontTest_CANUSE_WOFF2 = 14 <= p_EdgeHTML || 36 <= p_Chromium || 39 <= p_Gecko ||
602 <= p_WebKit || // Safari 10+(Mac OS Sierra +)
10 <= p_SafariMobile;
var webFontTest_CANUSE_WOFF2 = 14 <= p_EdgeHTML || 36 <= p_Chromium || 39 <= p_Gecko ||
602 <= p_WebKit && p_MacOS && 0 <= ua.conpare( '10.12', p_MacOS ) || // Safari 10+ & Mac OS Sierra(10.12)+
10 <= p_SafariMobile;
var webFontTest_CANUSE_WOFF = 6 <= p_Chromium ||
p_Gecko && 0 <= ua.conpare( p_engineVersion, '1.9.2' ) || // Gecko 1.9.2+
525 <= p_WebKit || // Safari 3.1+
3.2 <= p_SafariMobile ||
4.4 <= p_AOSP ||
11.1 <= p_Presto ||
533 <= p_WebKit || // Safari 5.0+
5 <= p_SafariMobile ||
4.4 <= p_AOSP ||
11.5 <= p_Presto ||
p_EdgeHTML ||
9 <= p_getEngineVersionOf( WHAT_BROWSER_AM_I__ENGINE_Trident ) ||
10 <= p_getEngineVersionOf( WHAT_BROWSER_AM_I__ENGINE_TridentMobile );
// TODO Blackberry Browser 7+
var webFontTest_CANUSE_TTF = 2 <= p_Chromium ||
p_FirefoxGte35 ||
525 <= p_WebKit || // Safari 3.1+
3.2 <= p_SafariMobile ||
2.2 <= p_AOSP ||
10 <= p_Presto ||
525 <= p_WebKit || // Safari 3.1+
4 <= p_SafariMobile ||
2.2 <= p_AOSP ||
10.1 <= p_Presto ||
p_EdgeHTML ||
9 <= p_getEngineVersionOf( WHAT_BROWSER_AM_I__ENGINE_Trident ) ||
10 <= p_getEngineVersionOf( WHAT_BROWSER_AM_I__ENGINE_TridentMobile );
// TODO Blackberry Browser 7+
var webFontTest_CANUSE_OTF = webFontTest_CANUSE_TTF;
var webFontTest_CANUSE_SVG = p_Chromium < 40 || // Chrome 1~39
525 <= p_WebKit || // Safari 3.1+
3.2 <= p_SafariMobile ||
3 <= p_AOSP ||
var webFontTest_CANUSE_SVG = 5.1 <= p_Windows && p_Windows <= 5.2 && p_Chromium < 40 || // XP : Chrome ~39, https://caniuse.com/?search=SVG%20font
6 <= p_Windows && p_Windows < 6.1 && p_Chromium < 51 || // Vista: Chrome ~50 Chrome 38 and newer support SVG fonts
p_Chromium < 37 || // Other: Chrome ~36 only on Windows Vista and XP.
525 <= p_WebKit || // Safari 3.1+
3.1 <= p_SafariMobile ||
3 <= p_AOSP ||
11.5 <= p_Presto;
// TODO Blackberry Browser 7+
var webFontTest_CANUSE_EOT = 4 <= p_getEngineVersionOf( WHAT_BROWSER_AM_I__ENGINE_Trident ) ||
Expand Down Expand Up @@ -351,15 +354,15 @@ var webFontTest_onCompleteHandler,
widthList[ i ] = width;
} else {
// Debug.log( '[webFontTest] ' + testFontName + ',' + font + '=' + width );
if( DEFINE_WEB_DOC_BASE__DEBUG ){
widthList[ i ] = width;
};
if( width !== webFontTest_defaultWidthList[ i ] ){
result = webFontTest_RESULT_AVAILABLE;
if( DEFINE_WEB_DOC_BASE__DEBUG ){
if( !DEFINE_WEB_DOC_BASE__DEBUG ){
break;
};
};
if( DEFINE_WEB_DOC_BASE__DEBUG ){
widthList[ i ] = width;
};
};
};

Expand All @@ -378,7 +381,7 @@ var webFontTest_onCompleteHandler,
* これを無視して、新しい値が得られるまで待ち続けます。新しい値（またはタイムアウト）を取得するまで待ち続ける。
*/
if( webFontTest_HAS_WEBKIT_FALLBACK_BUG ){
if( width === widthList[ 0 ] && width === widthList[ 1 ] ){
if( width /** widthList[2] */ === widthList[ 0 ] && width === widthList[ 1 ] ){
Debug.log( '[webFontTest] Hit... : width=' + width );

// すべての値が同じなので、ブラウザはウェブフォントを読み込んでいる可能性が高いです。
Expand Down
2 changes: 1 addition & 1 deletion src/scss/01_Variables/01_BuildTargets.scss
View file
Expand Up @@ -320,4 +320,4 @@
|| 4. Path
||
|_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/*/
$ASSET_PATH_WEBFONT : "#{if($COMMON_ASSET_DIR_TO_CSS_DIR, '../', '') + if($COMMON_CSS_DIR_TO_DESKTOP_CSS_DIR, '../', '') + if($COMMON_ASSET_DIR_TO_WEBFONT_DIR, $COMMON_ASSET_DIR_TO_WEBFONT_DIR + '/', '')}" !default;
$ASSET_PATH_WEBFONT : "#{if($COMMON_ASSET_DIR_TO_CSS_DIR != '', '../', '') + if($COMMON_CSS_DIR_TO_DESKTOP_CSS_DIR != '', '../', '') + if($COMMON_ASSET_DIR_TO_WEBFONT_DIR != '', $COMMON_ASSET_DIR_TO_WEBFONT_DIR + '/', '')}" !default;
16 changes: 15 additions & 1 deletion src/scss/02_mixin/02_css-hack.scss
View file
Expand Up @@ -7,6 +7,8 @@ $COMMENT_OUT_CSS_HACK : (
'chromeLte5SafariLte4' : if($UA_Modern , 1, 0),
'chromeLte9SafariLte5' : if($UA_Modern , 1, 0),
'chromeGte2To5' : if($UA_Modern , 1, 0),
'chromeGte53' : if($UA_Modern , 1, 0),
'chrome1Safari3' : if($UA_Modern , 1, 0),
'gecko120To121' : if($UA_Gecko12, 1, 0),
'onlyFirefoxOS22' : if($UA_Modern , 1, 0)
) !default;
Expand Down Expand Up @@ -55,7 +57,14 @@ $COMMENT_OUT_CSS_HACK : (
}
}
}
@else if $targetGroup == 'chromeLte5SafariLte4' { // Chrome 1, Safari ~4.1
@else if $targetGroup == 'chrome1Safari3' { // Chrome 1, Safari 3.x
@media screen and (min-width:0\-){
& [_lazyhack_="_:not(:root:root)"] {
@content;
}
}
}
@else if $targetGroup == 'chromeLte5SafariLte4' { // Chrome ~5, Safari ~4.1
@media all and (min-width:0\-) {
@content;
}
Expand All @@ -70,6 +79,11 @@ $COMMENT_OUT_CSS_HACK : (
@content;
}
}
@else if $targetGroup == 'chromeGte53' { // Chrome 53+
@supports (-webkit-appearance:none) and (font-variant-caps:normal) and (not (-ms-accelerator:true)) and (not (overflow:-webkit-marquee)) and (not (-moz-appearance:none)){
@content;
}
}
@else if $targetGroup == 'gecko120To121' { // Gecko 1.2.0~1.2.1
& [_lazyhack_="_:lang(x)"] {
@content;
Expand Down
33 changes: 25 additions & 8 deletions src/scss/02_mixin/web-font.scss
View file
@@ -1,7 +1,7 @@
@if( $COMMON_ASSET_DIR_TO_WEBFONT_DIR ){
@if( $MAYBE_CAN_USE_WEBFONT ){
@font-face {
font-family : '#{$COMMON_WEBFONT__FONT_NAME}';
font-family : #{$COMMON_WEBFONT__FONT_NAME};
font-weight : normal;
font-style : normal;
src : url('#{$ASSET_PATH_WEBFONT + $COMMON_WEBFONT__FILE_STEM}.eot?rw1juc');
Expand All @@ -10,12 +10,19 @@
url('#{$ASSET_PATH_WEBFONT + $COMMON_WEBFONT__FILE_STEM}.woff2?rw1juc') format('#{$WEBFONT_FORMAT_WOFF2}'),
url('#{$ASSET_PATH_WEBFONT + $COMMON_WEBFONT__FILE_STEM}.woff?rw1juc') format('#{$WEBFONT_FORMAT_WOFF}'),
url('#{$ASSET_PATH_WEBFONT + $COMMON_WEBFONT__FILE_STEM}.ttf?rw1juc') format('#{$WEBFONT_FORMAT_TTF}'),
url('#{$ASSET_PATH_WEBFONT + $COMMON_WEBFONT__FILE_STEM}.otf?rw1juc') format('#{$WEBFONT_FORMAT_OTF}'),
// url('#{$ASSET_PATH_WEBFONT + $COMMON_WEBFONT__FILE_STEM}.otf?rw1juc') format('#{$WEBFONT_FORMAT_OTF}'),
url('#{$ASSET_PATH_WEBFONT + $COMMON_WEBFONT__FILE_STEM}.svg?rw1juc##{$COMMON_WEBFONT__SVG_FONT_ID}') format('#{$WEBFONT_FORMAT_SVG}');
}
// TODO Chrome 1, Safari 3.x は合字が高性能な SVG フォントのみを利用する
// TODO Chrome 2~14 は SVG フォントだけが、アスキー英字のみ(?)の合字をサポートする
}
/* @if( $UA_Modern ){
@font-face {
font-family : #{$COMMON_WEBFONT__FONT_NAME}-svgpatch;
font-weight : normal;
font-style : normal;
src : url('#{$ASSET_PATH_WEBFONT + $COMMON_WEBFONT__FILE_STEM}.svg##{$COMMON_WEBFONT__SVG_FONT_ID}');
}
} */

@if( $UA_Modern or $UA_IE9 ){
.#{$COMMON_WEBFONT__TEST_ID_AND_CLASSNAME} {
@include check-css-ready;
Expand All @@ -27,6 +34,16 @@
@mixin web-font($ALT_FONTFAMILY : "serif !important") {
@if( $MAYBE_CAN_USE_WEBFONT ){
font-family : #{$COMMON_WEBFONT__FONT_NAME + if($ALT_FONTFAMILY, ', ' + $ALT_FONTFAMILY, '')};

// TODO Chrome 1, Safari 3.x は合字が高性能な SVG フォントのみを利用する
// TODO Chrome 2~14 は SVG フォントだけが、英字のみ(?)の合字をサポートする
/* @include css-hack(chrome1Safari3){
font-family : #{$COMMON_WEBFONT__FONT_NAME + '-svgpatch' + if($ALT_FONTFAMILY, ', ' + $ALT_FONTFAMILY, '')};
}
@include css-hack(chromeGte2To5){
font-family : #{$COMMON_WEBFONT__FONT_NAME + '-svgpatch' + if($ALT_FONTFAMILY, ', ' + $ALT_FONTFAMILY, '')};
} */

// if( $Option_hard-reset ){
font-style : normal;
font-weight : normal;
Expand All @@ -37,17 +54,17 @@
@if( $UA_Modern ){
/* Enable Ligatures ================ */
-webkit-font-feature-settings : "liga";
-moz-font-feature-settings : "liga=1";
-moz-font-feature-settings : "liga";
-moz-font-feature-settings : "liga=1";
-moz-font-feature-settings : "liga";
-ms-font-feature-settings : "liga" 1;
-o-font-feature-settings : "liga";
-o-font-feature-settings : "liga";
font-feature-settings : "liga";
/*
-webkit-font-variant-ligatures : discretionary-ligatures;
font-variant-ligatures : discretionary-ligatures; */

/* Better Font Rendering =========== */
-webkit-font-smoothing : antialiased;
-webkit-font-smoothing : antialiased;
-moz-osx-font-smoothing : grayscale;
}
}
Expand Down

0 comments on commit 809332e

Please sign in to comment.