Re: [閒聊] 修改KKTV的字幕樣式/大小

※ 引述《narihira2000 (つよし)》之銘言：
: 各位板友大家好
: 最近開始用KKTV來看日劇
: 但是發現他們字幕的位置一定會在時間軸的上面
: 而且又不能調整字幕大小(其實可以透過ctrl+滾輪來調整，但也不方便)
: 再加上我看日劇時習慣把日文字幕開起來
: 雙字幕直接快把畫面占掉一半
: https://i.imgur.com/80shVIX.jpg

: 於是興起想修改字幕樣式的念頭
: ==========================以上廢話==========================
: 以下開始教學
: 簡單來說就是透過stylus來調整字幕的css
: 1. 首先去擴充商店安裝stylus擴充元件(chrome、firefox、edge皆有)
: 2. 點開stylus並點選"管理已安裝樣式"後編寫一個新樣式
: https://i.imgur.com/5yYTO9H.jpg
: https://i.imgur.com/bLRGU5F.jpg
: 3. 貼上以下網址的內容
: https://bit.ly/2ZDwohD

感謝n大設計的css樣式
讓小弟在看KKTV的時候
視覺體驗上獲得極大的改善!
小弟也來獻醜一下
提供個人喜歡的樣式設計
讓大家做個參考...

以下借用日綜舉例
因為畫面上有滿滿的綜藝特效字幕 比較好說明差異...
(由於我偏好大字幕 已先套用n大的樣式 並將字改大)

這是KKTV的預設值 中文字幕幾乎快跟綜藝字幕融為一體...
https://i.imgur.com/yoaNlDr.png

打開背景之後才獲得改善
https://i.imgur.com/0dn2lzw.png

這是套用n大的 -webkit-text-stroke: 2px #000;
觀看體驗比起KKTV原生字幕效果 已經獲得提升
https://i.imgur.com/MO26tmN.png

但我個人近視比較重 想看更清楚一點 把邊框加粗到4px 結果卻變這樣... 囧
https://i.imgur.com/HHocfxL.png

於是我把webkit-text-stroke那行刪掉
改成
text-shadow:
0 0 10px #000,
0 0 10px #000,
0 0 10px #000;
https://i.imgur.com/4UyMi5Q.png

我覺得還不夠清楚 十倍奉還!
text-shadow:
0 0 10px #000,
0 0 10px #000,
0 0 10px #000,
0 0 10px #000,
0 0 10px #000,
0 0 10px #000,
0 0 10px #000,
0 0 10px #000,
0 0 10px #000,
0 0 10px #000;
https://i.imgur.com/r1NyDlK.png

還不夠啦~ 重口味全來!! 弄個25行!!!
https://i.imgur.com/yeTOCiT.png
呼~舒服~

以上提供給大家做個參考...
剛剛發現圖片網址全部貼錯 所以修改重貼... orz...

--

※ 發信站: 批踢踢實業坊(ptt.cc), 來自: 123.193.99.229 (臺灣)