Amazon PrimeVideoの字幕が見づらい

UPDATED

・フォントを"M PLUS Rounded"に変更
・Netflixに対しても近しい字幕スタイルで対応

最初からなのか途中からなのか、このあいだPrimeVideoで映画を観ているときにやたらと主張が激しい字幕表示が気になった。

ので、chromeの拡張機能でなんとかすることにした。
外部CSSを導入できる「stylus」を追加したうえで、以下のCSSを追加した。

/* prime video / Netflix 字幕文字サイズ調整*/
@import url('https://fonts.googleapis.com/css2?family=M+PLUS+Rounded+1c:wght@400;500&display=swap');

/* prime video */
.atvwebplayersdk-captions-text,
.dss-subtitle-renderer-cue-window span {
  font-family: 'M PLUS Rounded 1c', sans-serif !important;
  font-size: 3.5vw !important;
  font-style: normal !important;
  line-height: 1.3 !important;
  background: none !important;
  color: #d9d8d3 !important;
  text-shadow: 3px 3px 2px rgba(0, 0, 0, 1), -3px -3px 2px rgba(0, 0, 0, 1), -3px 3px 2px rgba(0, 0, 0, 1), 3px -3px 2px rgba(0, 0, 0, 1) !important;
  font-weight: 400 !important;
}

/* netflix */
.player-timedtext-text-container {
  bottom: -5% !important;
  transform: scaleY(1.1) skew(-10deg) !important;
}

.player-timedtext-text-container span[lang=ja] {
  font-family: 'M PLUS Rounded 1c', sans-serif !important;
  font-size: 3.8vw !important;
  line-height: 1.3 !important;
  color: #d9d8d3 !important;
  text-shadow: 3px 3px 2px rgba(0, 0, 0, 1), -3px -3px 2px rgba(0, 0, 0, 1), -3px 3px 2px rgba(0, 0, 0, 1), 3px -3px 2px rgba(0, 0, 0, 1) !important;
  font-weight: 400 !important;
}


.video-container>div {
  font-size: 1.2vw !important;
  font-family: 'M PLUS Rounded 1c', sans-serif !important;
  font-weight: 500 !important;
  color: #d9d8d3 !important;
}

#yt-lcf-layer {
  font-size: 2.5vw !important;
  font-weight: bold !important;
}

@media (min-width: 2600px) {

	/* prime video */
  .atvwebplayersdk-captions-text,
  .dss-subtitle-renderer-cue-window span {
    font-size: 2.6vw !important;
    margin-bottom: -10%;
  }

  .player-timedtext-text-container {
    bottom: 9em !important;
  }
	
	/* netflix */
  .player-timedtext-text-container span[lang=ja] {
    font-size: 2.6vw !important;
    letter-spacing: -0.03em;
  }

  .player-timedtext-text-container ruby rt span {
    font-size: 01vw !important;
  }
}

調整内容としては、細めのサンセリフではなく気持ち太めのウェイトのM PLUS Roundedにした上で、黒背景ではなく袋文字に変更した。さらに僕はウルトラワイドモニタを使っているので、メディアクエリでウルトラワイドモニタ全画面表示時に自分が見やすいバランスに調整した。

before

画像で見るとそうでもないが、モニタを前にすると字幕の主張がすごい

『カッコウ』（ティルマン・シンガー/監督, ティルマン・シンガー/脚本）

after

映画が見やすくなったし、字幕も読みやすい

『カッコウ』（ティルマン・シンガー/監督, ティルマン・シンガー/脚本）