I am new to ReactJS. I am trying to display all the font families in a dropdown, so that if i select one of the font family the text (displayed in a SVG) font-family will change.
I know in .net we can use System.Drawing.FontFamily.Families to get all the font familes. Like wise in react is there anything? Or else is there any other way to do this?
Thanks in advance...
You want to get all the available fonts on current machine, right?
I think there is no way to do that.
But with some trick we still can list almost available fonts on the current machine with:
1. A list of fonts
Windows fonts
Mac fonts
Some common fonts
2. JavaScript font detector
http://web.mit.edu/jmorzins/www/fonts.html
You got the idea, right? Now we just need to check what fonts are available in our font list and display them in the dropdown.
If you are building a web application using React, then it is impossible. For that matter, it is impossible with any library or framework. There is no JS API exposed by browsers that allow you get a list of all the fonts installed in the system (It can be a security issue).
However, if you are using React to build a Desktop application using electron.js or node-webkit.js, then you can export a binding for system API call to JavaScript and get this list. But it is a very cumbersome process. (I thought of this because you are comparing .net API with Web API.)
In general, as #Jared suggested, that is what most of the online(web applications) tools do when they want to provide font-selection dropdown for users.
Related
I am using ubuntu font in my web pages. But, when I am accessing the pages from different PC, the font does not appear good. what I should do? A constraint is there: I can't use internet for accessing the font,like googlefonts. One more thing, I have to consider IE8 also. Please, suggest some generic solution.
I am developing an app in which I need to have a label with my custom fonts.
I can't find a solution to load a .ttf file into qml. Any ideas?
Pressently with the cascades/Qt framework it is not supported,It will be supported in future releases.
Plz refer cascades roadmaps
https://developer.blackberry.com/cascades/download/roadmap/
It could be tricky getting it into QML, the recommended way for using fonts is: QFontDatabase::addApplicationFont but I'm unsure if that'll work on Blackberry as it does have issues on various platforms.
both solutions are wrong the proper one what i use is to create a weview and add fonts in the webview and then you can have the 2 way communication between the webview and the qml.
Please take a look at the funkypigeon app when you crete inside text of the card.
Is there a way to load typekit fonts dynamically, much like the Google Font API?
That is, how can I declare dynamically on each page the font name in a css link and load just the font(s) that are required for that page, instead of adding fonts into a kit and the loading the whole kit.
I have found a solution, posting it here in case it is useful for someone else:
I will use the Typekit API to dynamically create a new 'kit' (i.e. javascript file) for every different combination that my app requires, instead of including all of them in one big 'kit'.
See: https://typekit.com/docs/api/kits
Thanks anyway for your answers!
You could write a server side script that, depending on the page, will generate a different css file with the font-family rule(s) you wish.
Then you could use #import to bring this rule into your main css file.
TypeKit has recently introduced a way that users may find useful to perform functionality similar to what you are looking for but doing it in a very easy way without having to use the API. They call it Dynamic Subsetting.
As I write this it is only available for East Asian Fonts, however, there is a workaround to use it with other TypeKit fonts. The workaround comes from this site.
Add a East Asian Font such as Source Han Sans Japanese. This will automatically convert the kit to a dynamic kit.
Select each font and under the Character Set options choose Dynamic Subsetting for each font.
Remove the East Asian Font.
Publish Kit.
Even if you remove the East Asian Font, the kit will remain a Dynamic Kit.
I'm looking for a set of CSS or scripts which mimic the UI (only the UI) of default applications on the iPhone/iPad, Blackberry and base Android apps?
I have a client who needs the ability to preview content and form pages on the various OS', but in their desktop browser (Chrome, FF, IE(ugh)). Ofcourse, there are dozens and dozens of standalone emulators, but I cannot find any one who may have created CSS or scripts to mimic how these would look, in the browser - e.g. default button stylings, colours, etc. not the logic of the app, but just the way it could look - with the best example I can find being : http://groupaware.mobi/iphone/#_Windows
Anyone with ideas?
thanks!
For iOS:
http://code.google.com/p/iphone-universal/
and
http://www.peterhintondesign.co.uk/journal/index.php/iphone-css-template/
which is based on the first one.
I'm sorry but until now I have only been able to find templates regarding the Iphone and not the BlackBerry nor Android UI. (I've tried to find them myself before too.)
A great template for CSS (Photoshop CS4 or higher needed) based on the Iphone is:
http://www.teehanlax.com/blog/2010/06/14/iphone-gui-psd-v4/
Also the links by tomwadley, especially the prior link, are also quite useful regarding coding and framework.
There's some answers in this book: http://oreilly.com/catalog/9780596805791/ about creating CSS styles to mimic iOS stuff. Also covers phonegap etc, might be useful.
jQuery Mobile (JQM): http://jquerymobile.com is a framework which does just that. At its simplest, it renders "standard" html elements as native OS elements for platforms like iOS and Android.
You don't have to use the JQM framework, of course; you could simple take what you need from the CSS that JQM employs. Either inspect the css directly or write a simple test page which loads JQM and inspect the CSS in Firebug or Chrome developer console.
Checkout iUI..probably what you are looking for.
http://www.iui-js.org/index.html
For the android, try this implementation of Holo Light and Dark: http://vezquex.com/projects/holo-css/
I am working on a Facebook iFrame application, and have a question about styling.
I want the application content to look like the rest of facebook. So the most obvious approach I could think of was to use a stylesheet provided by Facebook for application development that includes such styles. However I cannot seem to find anything about this on developers.facebook.com or any other site for that matter.
I have created some FBML application earlier, and these was able to use Facebook styles directly since the application content was rendrered within the facebook pages. But iframes does not inherit the stylesheet from the parent content (nor should they), so I was wondering how (or possibly if) this can be done.
I have found some posts/blogs that simply tells you to create an application stylesheet that mimics the Facebook look. But I don't think this is a very good idea, as this CSS must be updated every time anything changes on Facebook. It also seems that all facebook wiki pages regarding CSS (which I have used before) has been removed.
The reason I do not want to use FBML Canvas is that Facebook is in the process of deprecating this approach. They recommend new applications to be created using iframes.
http://developers.facebook.com/docs/reference/fbml/
I really hope anyone has any good ideas on this.
There is no official way. For some reason, FB shards their styles to a ridiculous degree. They also change the filename rather than appending a version parameter every time they make a change to prevent downstream caching. Here's an example of todays stylesheets:
http://static.ak.fbcdn.net/rsrc.php/y-/r/40PDtAkbl8D.css
http://b.static.ak.fbcdn.net/rsrc.php/yE/r/u7RMVVYiOcY.css
http://static.ak.fbcdn.net/rsrc.php/yT/r/P-HsvhlyVjJ.css
http://static.ak.fbcdn.net/rsrc.php/yT/r/CFyyRO05F0N.css
http://static.ak.fbcdn.net/rsrc.php/y0/r/k00rCIzSCMA.css
http://b.static.ak.fbcdn.net/rsrc.php/yv/r/BJI6bizfXHL.css
http://b.static.ak.fbcdn.net/rsrc.php/yD/r/rmbhh_xQwEk.css
http://b.static.ak.fbcdn.net/rsrc.php/yn/r/xlsrXFt9-vD.css
http://b.static.ak.fbcdn.net/rsrc.php/yN/r/Uuokrl6Xv3c.css
http://b.static.ak.fbcdn.net/rsrc.php/y0/r/klTGALEjWM8.css
http://b.static.ak.fbcdn.net/rsrc.php/yN/r/mlYhlJwnCdr.css
http://b.static.ak.fbcdn.net/rsrc.php/yT/r/uFI2FW2LitH.css
http://b.static.ak.fbcdn.net/rsrc.php/yh/r/5Bzj1255G1S.css
http://b.static.ak.fbcdn.net/rsrc.php/yp/r/5UteuBI1b8_.css
You can automate this process fairly easily using either PHP or .NET using existing solutions Minify and Combiner respectively.
A simpler method would be to use the Web Developer toolbar for Firefox, go to Facebook and choose the Web Developer toolbar option to "view CSS" which will bunch all the CSS up for you. Copy and paste it into your own local stylesheet and you only have to update when Facebook makes a major change.
So while there is no simple way (that I am aware of), there are methods for you take care of it in a fairly speedy manner.