/* Font Display Optimization CSS
 * 解決字型顯示問題，減少 CLS (Cumulative Layout Shift)
 * 添加 font-display: swap 以改善字型載入性能
 */

/* FontAwesome 字型優化 */
@font-face {
  font-family: 'FontAwesome';
  src: url('../plugs/font-awesome-4.7.0/fonts/fontawesome-webfont.eot?v=4.7.0');
  src: url('../plugs/font-awesome-4.7.0/fonts/fontawesome-webfont.eot?#iefix&v=4.7.0') format('embedded-opentype'), 
       url('../plugs/font-awesome-4.7.0/fonts/fontawesome-webfont.woff2?v=4.7.0') format('woff2'), 
       url('../plugs/font-awesome-4.7.0/fonts/fontawesome-webfont.woff?v=4.7.0') format('woff'), 
       url('../plugs/font-awesome-4.7.0/fonts/fontawesome-webfont.ttf?v=4.7.0') format('truetype'), 
       url('../plugs/font-awesome-4.7.0/fonts/fontawesome-webfont.svg?v=4.7.0#fontawesomeregular') format('svg');
  font-weight: normal;
  font-style: normal;
  font-display: swap; /* 關鍵優化：使用 swap 策略 */
}

/* UEditor 圖標字型優化 */
@font-face {
  font-family: "edui-iconfont";
  src: url('../plugs/ueditor/themes/default/fonts/iconfont.eot');
  src: url('../plugs/ueditor/themes/default/fonts/iconfont.eot?#iefix') format('embedded-opentype'),
       url('../plugs/ueditor/themes/default/fonts/iconfont.woff2') format('woff2'),
       url('../plugs/ueditor/themes/default/fonts/iconfont.woff') format('woff'),
       url('../plugs/ueditor/themes/default/fonts/iconfont.ttf') format('truetype'),
       url('../plugs/ueditor/themes/default/fonts/iconfont.svg#iconfont') format('svg');
  font-weight: normal;
  font-style: normal;
  font-display: swap; /* 關鍵優化：使用 swap 策略 */
}

/* 字型載入優化策略 */
.fa {
  font-display: swap;
}

/* 預載入關鍵字型 */
.font-preload {
  font-display: swap;
}

/* 字型回退策略 */
body {
  font-family: 'Instrument Sans', 'Microsoft JhengHei', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-display: swap;
}

/* 減少字型載入時的佈局偏移 */
.fa:before {
  display: inline-block;
  width: 1em;
  text-align: center;
}

/* 字型載入失敗時的回退樣式 */
@supports not (font-display: swap) {
  .fa {
    visibility: hidden;
  }
  
  .fa.font-loaded {
    visibility: visible;
  }
}

/* 優化字型渲染 */
* {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* 字型載入狀態指示器 */
.font-loading {
  opacity: 0.7;
  transition: opacity 0.3s ease;
}

.font-loaded {
  opacity: 1;
}

/* 針對性能分析中提到的問題進行優化 */
/* 減少強制重排 */
.fa, .edui-iconfont {
  will-change: auto;
  contain: layout style;
}

/* 字型載入完成後的動畫 */
@keyframes fontFadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

.font-fade-in {
  animation: fontFadeIn 0.3s ease-in-out;
}