diff --git a/src/js/1_packageGlobal/1_packageVariable.js b/src/js/1_packageGlobal/1_packageVariable.js index 39bcb119..b04c3a63 100644 --- a/src/js/1_packageGlobal/1_packageVariable.js +++ b/src/js/1_packageGlobal/1_packageVariable.js @@ -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, @@ -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', {} ) でエラー diff --git a/src/js/2_CoreModule/Timer.js b/src/js/2_CoreModule/Timer.js index d821b209..94cc5f18 100644 --- a/src/js/2_CoreModule/Timer.js +++ b/src/js/2_CoreModule/Timer.js @@ -12,10 +12,12 @@ _p_Timer_remove = Timer_remove; */ /** @type {!Array.} */ var TIMER_LISTENERS = []; -var TIMER_INTERVAL = 16, +var TIMER_INTERVAL = p_SafariMobile | 0 === 4 ? 64 : 16, // iOS Safari 4.2 : 16ms 間隔だと webFontTest に失敗する timerUID = 0, timerClearID; +Debug.log( '[core] TIMER_INTERVAL:' + TIMER_INTERVAL ); + /** @type {!Function|string} */ var Timer_on = function(){ var cb, i = 0, t = p_getTimestamp(); diff --git a/src/js/6_CanUse/webfontTest.js b/src/js/6_CanUse/webfontTest.js index 67501797..f70f13f3 100644 --- a/src/js/6_CanUse/webfontTest.js +++ b/src/js/6_CanUse/webfontTest.js @@ -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; @@ -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 ){ @@ -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 ) || @@ -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; - }; }; }; @@ -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 ); // すべての値が同じなので、ブラウザはウェブフォントを読み込んでいる可能性が高いです。 diff --git a/src/scss/01_Variables/01_BuildTargets.scss b/src/scss/01_Variables/01_BuildTargets.scss index 0782424a..feb1c93e 100644 --- a/src/scss/01_Variables/01_BuildTargets.scss +++ b/src/scss/01_Variables/01_BuildTargets.scss @@ -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; \ No newline at end of file + $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; \ No newline at end of file diff --git a/src/scss/02_mixin/02_css-hack.scss b/src/scss/02_mixin/02_css-hack.scss index 26fded68..3313fdb7 100644 --- a/src/scss/02_mixin/02_css-hack.scss +++ b/src/scss/02_mixin/02_css-hack.scss @@ -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; @@ -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; } @@ -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; diff --git a/src/scss/02_mixin/web-font.scss b/src/scss/02_mixin/web-font.scss index 5c88f58d..24a02493 100644 --- a/src/scss/02_mixin/web-font.scss +++ b/src/scss/02_mixin/web-font.scss @@ -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'); @@ -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; @@ -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; @@ -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; } }