DJango - 爲Ckeditor添加自定義字體

Question

我想將我的字體添加到CKEditor。我花了一段時間在互聯網上搜索，但所有的解決方案都不適合我。使用this question後，添加了字體標籤到組合框，但選擇字體後我的文本未更改。

這是我的代碼

的CKEditor/config.js

CKEDITOR.editorConfig = function(config) { 
    // Define changes to default configuration here. For example: 
    // config.language = 'fr'; 
    // config.uiColor = '#AADC6E'; 
    config.contentsCss = 'fonts.css'; 
    config.font_names = 'BBCNassim;' + config.font_names; 
}; 

的CKEditor/fonts.css

@font-face { 
    font-family: 'BBCNassim'; 
    src: url(../fonts/BBCNassim.TTF); 
    src: local("BBCNassim"), url("../fonts/BBCNassim.TTF") format("truetype"); 
} 

和BBCNassim.TTF的目錄是CKEditor的/字體/ BBCNassim.TTF

已編輯。

我看到了我的瀏覽器請求（status = 404）。我的網站無法加載fonts.css。我使用Django框架。

瀏覽器加載http://127.0.01:8000/admin/app/post/2/fonts.css。

Answer 1

我使用的是django-text-ckeditor和djangocms。我有完全相同的問題。請注意步驟並逐步完成。

1. 使用Ctrl + Shift + T開放式終端。
2. 轉到項目目錄，如果使用virtualenv，則激活您的virtualenv。
3. 型python manage.py shell
4. 然後鍵入from django.conf import settings
5. 然後鍵入settings.CKEDITOR_SETTINGS看到默認的Django文本CKEditor的設置。此設置與此類似： CKEDITOR_SETTINGS = { 'allowedContent': True, 'autoParagraph': False, 'baseHref': '/media/', 'enterMode': 'CKEDITOR.ENTER_BR', 'extraAllowedContent': 'style;*;*{*}', 'filebrowserImageBrowseUrl': '/filebrowser/', 'language': '{{ language }}', 'removePlugins': 'stylesheetparser,about,showblocks,language,form,flash,iframe', 'skin': 'moonocolor', 'toolbar': 'toolbar_Basic', }
6. 現在您可以在您的settings.py中定義CKEDITOR_SETTINGS並覆蓋它。
7. 現在你需要font_names鍵添加到CKEDITOR_SETTINGS類似這樣： CKEDITOR_SETTINGS = { ..., ..., 'font_names': 'IRANSans; Yekan; Bnasim; Bkoodak;, ..., } 如果你自定義的字體名稱初始化這個7步驟，字體組合。我懇請你正確地做到這一點。

注意，如果你有在statics和主題這些字體由@font-face在你的CSS定義，你可以在CKEditor的使用字體。 例如，這是它定義我farsifonts.css，我的字體：

@font-face { 
    font-family: 'Droid Arabic Naskh'; 
    font-style: normal; 
    font-weight: 400; 
    src: url('../fonts/DriodArabicNaskh/Regular/DroidNaskh-Regular.eot'); 
    src: url('../fonts/DriodArabicNaskh/Regular/DroidNaskh-Regular.eot?#iefix') format('embedded-opentype'), 
    url('../fonts/DriodArabicNaskh/Regular/DroidNaskh-Regular.woff2') format('woff2'), 
    url('../fonts/DriodArabicNaskh/Regular/DroidNaskh-Regular.woff') format('woff'), 
    url('../fonts/DriodArabi.loginColumnscNaskh/Regular/DroidNaskh-Regular.ttf') format('truetype'); 
} 
@font-face { 
    font-family: 'Droid Arabic Naskh'; 
    font-style: normal; 
    font-weight: 700; 
    src: url('../fonts/DriodArabicNaskh/Bold/DroidNaskh-Bold.eot'); 
    src: url('../fonts/DriodArabicNaskh/Bold/DroidNaskh-Bold.eot?#iefix') format('embedded-opentype'), 
    url('../fonts/DriodArabicNaskh/Bold/DroidNaskh-Bold.woff2') format('woff2'), 
    url('../fonts/DriodArabicNaskh/Bold/DroidNaskh-Bold.woff') format('woff'), 
    url('../fonts/DriodArabicNaskh/Bold/DroidNaskh-Bold.ttf') format('truetype'); 
} 
@font-face { 
    font-family: 'Droid Arabic Kufi'; 
    font-style: normal; 
    font-weight: 400; 
    src: url('../fonts/DroidArabicKufi/Regular/DroidKufi-Regular.eot'); 
    src: url('../fonts/DroidArabicKufi/Regular/DroidKufi-Regular.eot?#iefix') format('embedded-opentype'), 
    url('../fonts/DroidArabicKufi/Regular/DroidKufi-Regular.woff2') format('woff2'), 
    url('../fonts/DroidArabicKufi/Regular/DroidKufi-Regular.woff') format('woff'), 
    url('../fonts/DroidArabicKufi/Regular/DroidKufi-Regular.ttf') format('truetype'); 
} 
@font-face { 
    font-family: 'Droid Arabic Kufi'; 
    font-style: normal; 
    font-weight: 700; 
    src: url('../fonts/DroidArabicKufi/Bold/DroidKufi-Bold.eot'); 
    src: url('../fonts/DroidArabicKufi/Bold/DroidKufi-Bold.eot?#iefix') format('embedded-opentype'), 
    url('../fonts/DroidArabicKufi/Bold/DroidKufi-Bold.woff2') format('woff2'), 
    url('../fonts/DroidArabicKufi/Bold/DroidKufi-Bold.woff') format('woff'), 
    url('../fonts/DroidArabicKufi/Bold/DroidKufi-Bold.ttf') format('truetype'); 
} 
@font-face { 
    font-family: 'Bnasim'; 
    src: url('../fonts/BBCNasim/BBCNasim.eot'); 
    src: url('../fonts/BBCNasim/BBCNasim.eot?#iefix') format('embedded-opentype'); 
    src: local('☺'), url('../fonts/BBCNasim/BBCNasim.woff') format('woff'), 
    url('../fonts/BBCNasim/BBCNasim.ttf') format('truetype'), 
    url('../fonts/BBCNasim/BBCNasim.svg#BBCNasim') format('svg'); 
    font-weight: normal; 
    font-style: normal; 
} 
@font-face { 
    font-family: 'Bkoodak'; 
    src: url('../fonts/BKoodak/BKoodak.eot'); 
    src: url('../fonts/BKoodak/BKoodak.eot?#iefix') format('embedded-opentype'); 
    src: local('☺'), url('../fonts/BKoodak/BKoodak.woff') format('woff'), 
    url('../fonts/BKoodak/BKoodak.ttf') format('truetype'), 
    url('../fonts/BKoodak/BKoodak.svg#BKoodak') format('svg'); 
    font-weight: normal; 
    font-style: normal; 
} 
@font-face { 
    font-family: 'Bnazanin'; 
    src: url('../fonts/BNazanin/BNazanin.eot'); 
    src: url('../fonts/BNazanin/BNazanin.eot?#iefix') format('embedded-opentype'); 
    src: local('☺'), url('../fonts/BNazanin/BNazanin.woff') format('woff'), 
    url('../fonts/BNazanin/BNazanin.ttf') format('truetype'), 
    url('../fonts/BNazanin/BNazanin.svg#BNazanin') format('svg'); 
    font-weight: normal; 
    font-style: normal; 
} 
@font-face { 
    font-family: 'yekan'; 
    src: url('../fonts/WeblogmaYekan.eot?#') format('eot'), /* IE6â€「8 */ 
    url('../fonts/WeblogmaYekan.woff') format('woff'), /* FF3.6+, IE9, Chrome6+, Saf5.1+*/ 
    url('../fonts/WeblogmaYekan.ttf') format('truetype'); /* Saf3â€」5, Chrome4+, FF3.5, Opera 10+ */ 
} 



@font-face { 
    font-family: IRANSans; 
    font-style: normal; 
    font-weight: bold; 
    src: url('../fonts/iransans/eot/IRANSansWeb_Bold.eot'); 
    src: url('../fonts/iransans/eot/IRANSansWeb_Bold.eot?#iefix') format('embedded-opentype'), /* IE6-8 */ 
    url('../fonts/iransans/woff2/IRANSansWeb_Bold.woff2') format('woff2'), /* FF39+,Chrome36+, Opera24+*/ 
    url('../fonts/iransans/woff/IRANSansWeb_Bold.woff') format('woff'), /* FF3.6+, IE9, Chrome6+, Saf5.1+*/ 
    url('../fonts/iransans/ttf/IRANSansWeb_Bold.ttf') format('truetype'); 
} 
@font-face { 
    font-family: IRANSans; 
    font-style: normal; 
    font-weight: 500; 
    src: url('../fonts/iransans/eot/IRANSansWeb_Medium.eot'); 
    src: url('../fonts/iransans/eot/IRANSansWeb_Medium.eot?#iefix') format('embedded-opentype'), /* IE6-8 */ 
    url('../fonts/iransans/woff2/IRANSansWeb_Medium.woff2') format('woff2'), /* FF39+,Chrome36+, Opera24+*/ 
    url('../fonts/iransans/woff/IRANSansWeb_Medium.woff') format('woff'), /* FF3.6+, IE9, Chrome6+, Saf5.1+*/ 
    url('../fonts/iransans/ttf/IRANSansWeb_Medium.ttf') format('truetype'); 
} 
@font-face { 
    font-family: IRANSans; 
    font-style: normal; 
    font-weight: 300; 
    src: url('../fonts/iransans/eot/IRANSansWeb_Light.eot'); 
    src: url('../fonts/iransans/eot/IRANSansWeb_Light.eot?#iefix') format('embedded-opentype'), /* IE6-8 */ 
    url('../fonts/iransans/woff2/IRANSansWeb_Light.woff2') format('woff2'), /* FF39+,Chrome36+, Opera24+*/ 
    url('../fonts/iransans/woff/IRANSansWeb_Light.woff') format('woff'), /* FF3.6+, IE9, Chrome6+, Saf5.1+*/ 
    url('../fonts/iransans/ttf/IRANSansWeb_Light.ttf') format('truetype'); 
} 
@font-face { 
    font-family: IRANSans; 
    font-style: normal; 
    font-weight: 200; 
    src: url('../fonts/iransans/eot/IRANSansWeb_UltraLight.eot'); 
    src: url('../fonts/iransans/eot/IRANSansWeb_UltraLight.eot?#iefix') format('embedded-opentype'), /* IE6-8 */ 
    url('../fonts/iransans/woff2/IRANSansWeb_UltraLight.woff2') format('woff2'), /* FF39+,Chrome36+, Opera24+*/ 
    url('../fonts/iransans/woff/IRANSansWeb_UltraLight.woff') format('woff'), /* FF3.6+, IE9, Chrome6+, Saf5.1+*/ 
    url('../fonts/iransans/ttf/IRANSansWeb_UltraLight.ttf') format('truetype'); 
} 
@font-face { 
    font-family: IRANSans; 
    font-style: normal; 
    font-weight: normal; 
    src: url('../fonts/iransans/eot/IRANSansWeb.eot'); 
    src: url('../fonts/iransans/eot/IRANSansWeb.eot?#iefix') format('embedded-opentype'), /* IE6-8 */ 
    url('../fonts/iransans/woff2/IRANSansWeb.woff2') format('woff2'), /* FF39+,Chrome36+, Opera24+*/ 
    url('../fonts/iransans/woff/IRANSansWeb.woff') format('woff'), /* FF3.6+, IE9, Chrome6+, Saf5.1+*/ 
    url('../fonts/iransans/ttf/IRANSansWeb.ttf') format('truetype'); 
} 

@font-face { 
    font-family: VazirCode; 
    font-style: normal; 
    font-weight: normal; 
    src: url('../fonts/vazir-code/Vazir-Code.eot'); 
    src: url('../fonts/vazir-code/Vazir-Code.eot?#iefix') format('embedded-opentype'), /* IE6-8 */ 
    url('../fonts/vazir-code/Vazir-Code.woff') format('woff'), /* FF3.6+, IE9, Chrome6+, Saf5.1+*/ 
    url('../fonts/vazir-code/Vazir-Code.ttf') format('truetype'); 
} 

注：你的字體沒有送達。也許你有這個列表中的一個問題：

• 也許你的字體無法送達。檢查如何在your_style中設置字體路徑。CSS

• 也許你需要收集靜態文件使用此命令python manage.py collectstatic