☰

Firefox Reader View의 CSS를 사용자 정의하는 방법이 있습니까?

tag-icon • tag-icon firefox fonts css stylish
Firefox Reader View의 CSS를 사용자 정의하는 방법이 있습니까?

저는 Firefox 리더뷰를 좋아합니다. 그러나 글꼴은 아닙니다. 보다 구체적으로 말하면 다음은 최선의 선택이 아닙니다.

body.serif, body.serif .remove-button {
    font-family: Georgia, "Times New Roman", serif;
}

body.sans-serif, body.sans-serif .remove-button {
    font-family: Helvetica, Arial, sans-serif;
}

나는 차라리 이것을 갖고 싶다:

body.serif, body.serif .remove-button {
    font-family: "Cambria", serif;
}

body.sans-serif, body.sans-serif .remove-button {
    font-family: "Open Sans", "Segoe UI", "Tahoma", "Calibri", sans-serif;
}

이제 개발자 도구를 통해 리더 뷰를 열 때마다 이러한 변경 사항을 수동으로 적용할 수 있습니다. 그런데 이것을 자동화하는 방법이 있나요?

Stylish를 사용해 보았지만 올바르게 코딩할 수 있거나 Stylish가 작업에 적합하지 않았습니다.

답변1

아직 이 문제를 해결하지 못했거나 후손을 위해 FF v60부터 해결책은 다음과 같습니다.

  • 프로필 폴더 찾기(에 나열됨 about:support)
  • 거기에 "chrome"이라는 폴더가 아직 없으면 만듭니다.
  • 해당 폴더에 "userContent.css"라는 파일을 만듭니다.

그런 다음 올바른 CSS at-rule이 필요하며 다음과 같이 하면 됩니다.

@-moz-document url-prefix("about:reader") {
    body.serif {
        font-family: 'Besley*' !important;
    }
}

주의: 어두운 테마의 대비를 줄이는 데 도움이 되는 사이드바와 해당 버튼의 스타일을 지정할 수도 있습니다.

.toolbar {
    background-color: #333 !important;
    border-right: 1px solid #444 !important;
}
.button {
    color: #ccc !important;
    background-color: #444 !important;
}

관련 정보