→ kuninaka: 好會喔 01/31 17:30
推 alexgun37: 厲害喔 01/31 18:06
推 plzeatolives: 厲害喔！XDDD 01/31 18:18
推 donnamonya: 看完只記得厲害喔好會停頓 01/31 18:24
推 teiiet: 酷欸... 01/31 19:01
推 liang0523: 厲害喔好會(舉讚) 01/31 19:53
推 batis: 感謝分享 我也喜歡邊框加粗 08/25 06:08
※ 引述《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 (臺灣)
※ 文章網址: https://www.ptt.cc/bbs/Japandrama/M.1612075839.A.086.html